Question

如果单击按钮一，则可以看到内容，单击按钮2可以看到内容。

这是需要发生的事情：
单击按钮一，可以看到内容，然后单击按钮2，隐藏按钮一内容，而按钮二内容可见，反之亦然。

换句话说，按钮一和按钮二内容不能同时可见。

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

也许您想要使用jQuery UI中的accordion widget。至少看起来这就是你想要重现的东西。

Answer 2

将$('.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 3

它不是特别漂亮，但您可以隐藏所有.interactContainers，然后再显示您要显示的那个： http://jsfiddle.net/4HYcX/97/

Answer 4

您更新了代码：按钮一和按钮两只需要单击即可运行。

<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();
    }

Answer 5

向上滑动任何不是当前点击元素的内容：

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
    }
}

单击会隐藏其他内容

5 个答案: