Question

我找到了这段代码（jQuery）：

$('.toggle').click(function() {
    $('.container').eq($(this).index()).toggle('fast');
});

这是我的HTML：

<h4 class="toggle">Title1</h4>
<h4 class="toggle">Title2</h4>
<h4 class="toggle">Title3</h4>
<div class="container">Content1</div>
<div class="container">Content2</div>
<div class="container">Content3</div>

CSS

.container {
   display: none;
}

我可以用它切换我想要的东西。

问题

当我单击toggle-class时，我想关闭所有打开的容器类但不是当前的容器类（因为它应该被切换）。

当前容器类应该切换。这意味着所有元素都可以关闭，但只能同时打开一个元素。

我试图在脚本之前隐藏jQuery，但是这使得容器类无法关闭（因为当切换hide等于show时）。

代码猜测 隐藏除此之外的所有.container

Answer 1

使用David's answer作为起点，我们可以使用.siblings来实现您的目标：

$('.toggle').click(function() {
    var index = $(this).index();
    $('.container').eq(index).toggle().siblings('.container').hide();
});

请参阅：http://www.jsfiddle.net/85zCp/

另外，您可能希望使用JavaScript最初隐藏所有元素而不是CSS，因为如果使用CSS隐藏它们，禁用JavaScript的用户将无法看到任何内容。此外，您可能希望在内容前面放置每个h4标题，而不是像现在这样放在一起。

Answer 2

$('.toggle').click(function () { $('.container').hide('fast'); $('.container').eq($(this).index()).show('fast'); });

我不确切知道，但我认为这是你正在寻找的......

干杯...

Answer 3

这有点冗长，但它的使用应该相当明显：

$('.toggle').click(
    function(){
        var index = $(this).index();
        $('.container').hide().eq(index).show();
    });

JS Fiddle demo

jQuery切换 - 关闭除此之外的所有内容

3 个答案: