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

5 回答 5

0

也许您想使用 jQuery UI 中的手风琴小部件。至少看起来这就是您要复制的内容。

于 2013-09-08T17:13:17.190 回答
0

添加$('.interactContainers').not('#' + x).hide();到toggleInteractContainers函数的第一行。除了您要打开的元素 ( ) 之外，这会隐藏div该类的所有元素。interactContainersx

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/

于 2013-09-08T17:13:36.123 回答
0

它不是特别漂亮，但是您可以.interactContainers在显示要显示的之前隐藏所有内容：http: //jsfiddle.net/4HYcX/97/

于 2013-09-08T17:14:33.700 回答
0

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

<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();
    }
于 2013-09-08T17:16:53.643 回答
0

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

演示

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
    }
}
于 2013-09-08T17:17:22.003 回答