Одиночный клик скрывает другой контент

Question

Если нажата кнопка One, то отображается Содержимое видно, и при нажатии кнопки «2» Содержимое видно.

Вот что должно произойти:
Кнопка One нажат и Content видны, то кнопка Два щелчка и одна кнопка Содержания скрыто в то время как кнопка Два Содержания видно, и наоборот.

Другими словами, Button One и Button Two Содержимое не может быть видимым одновременно.

You can find the code at:jsfiddle.net/4HYcX/97/

Это код на jsfiddle:

.interactContainers { 
    display:none; 
    margin-top: 4px; 
} 

function toggleInteractContainers(x) { 
    if ($('#'+x).is(":hidden")) { 
     $('#'+x).slideDown(200); 
    } else { 
     $('#'+x).hide(); 
    } 
    $('.interactContainers').hide(); 
} 

<a href="#" onclick="return false" onmousedown="toggleInteractContainers('one');">Button One</a> 
<div class="interactContainers" id="one"> 
    Content for Button One. <a href="#" onclick="return false" onmousedown="toggleInteractContainers('one');" title="Close">Exit</a> 
</div> 
<a href="#" onclick="return false" onmousedown="toggleInteractContainers('two');">Button Two</a> 
<div class="interactContainers" id="two"> 
    Content for Button Two. <a href="#" onclick="return false" onmousedown="toggleInteractContainers('two');" title="Close">Exit</a> 
</div> 

Answer 1

слайд вверх все, что не текущий щелкнул элемент:

Demo

function toggleInteractContainers(x) { 
    $('.interactContainers').not('#' + x).slideUp(200); 
    if ($('#' + x).is(":hidden")) { 
     $('#' + x).slideDown(200); 
    } else { 
     $('#' + x).slideUp(); // <== also changed to slideUp instead of hide 
    } 
} 

Answer 2

Может быть, вы хотели бы использовать accordion widget из JQuery UI. По крайней мере, похоже, это то, что вы пытаетесь воспроизвести.

Answer 3

Добавить $('.interactContainers').not('#' + x).hide(); в первую строку вашего toggleInteractContainers функции. Это скрывает все элементы div с классом interactContainers кроме того, который вы собираетесь открыть (x).

function toggleInteractContainers(x) { 
    // Hide all apart from the one about to be opened. 
    $('.interactContainers').not('#' + x).hide(); 
    if ($('#' + x).is(":hidden")) { 
     $('#' + x).slideDown(200); 
    } else { 
     $('#' + x).hide(); 
    } 
    //if $('.interactContainers').hide(); is commented out it's a single click but the Content for the buttons stay open when each is clicked. 
    //$('.interactContainers').hide(); 
} 

http://jsfiddle.net/4HYcX/100/

Answer 4

Это не особенно красиво, но вы можете просто скрыть все .interactContainers перед показом, который вы хотите, чтобы показать: http://jsfiddle.net/4HYcX/97/

Answer 5

вас обновленный код: одна кнопка и кнопка Две необходимости для работы одним щелчком мыши.

<div style="color:red">Content for Button One and Button Two should not be open at the same time.</div> 
    <br /> 
    <a href="#" onclick="return false" onmousedown="toggleInteractContainers('one','two');">Button One</a> 
    <div class="interactContainers" id="one"> 
     <span style="color:red">Content</span> for Button One. <a href="#" onclick="return false" onmousedown="toggleInteractContainers('one','two');" title="Close">Exit</a> 
    </div> 
    <br /> 
    <a href="#" onclick="return false" onmousedown="toggleInteractContainers('two','one');">Button Two</a> 
    <div class="interactContainers" id="two"> 
     <span style="color:red">Content</span> for Button Two. <a href="#" onclick="return false" onmousedown="toggleInteractContainers('two','one');" title="Close">Exit</a> 
    </div> 

JS:

function toggleInteractContainers(x,y) { 
     if ($('#'+x).is(":hidden")) { 
      $('#'+x).slideDown(200); 
      $('#'+y).hide(); 
     } else { 
      $('#'+x).hide(); 
      $('#'+y).slideDown(200); 
     } 
    //if $('.interactContainers').hide(); is commented out it's a single click but the Content for the buttons stay open when each is clicked. 
     //$('.interactContainers').hide(); 
    }