jquery - 是否可以在切换(三个切换)上显示一个 div 并隐藏所有其他 div ..？

Question

嘿伙计们，感谢您上次在 this question 中提供的帮助。 .
现在我想知道如何使用三个切换按钮来代替一个切换按钮？
我的html代码是:

<div class="layer1">
<span class="heading">Header-1 </span><span class="heading">Header-1 </span><span class="heading">Header-1 </span>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
<span class="heading">Header-2</span><span class="heading">Header-1 </span><span class="heading">Header-1 </span>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
<span class="heading">Header-3</span><span class="heading">Header-1 </span><span class="heading">Header-1 </span>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>

CSS 是:

.layer1 {
margin: 0;
padding: 0;
width: 300px;
}

.heading {
 margin: 1px;
 color: #fff;
padding: 3px 10px;
cursor: pointer;
position: relative;
background-color:#c30;
}
.content {
padding: 5px 10px;
background-color:#fafafa;
}
p { padding: 5px 0; }

jquery 是:

jQuery(document).ready(function() {
    jQuery(".content").hide();
    jQuery(".heading").click(function() {
        jQuery(this)
            .next(".content").slideToggle(500)
            .siblings(".content").slideUp(500);
    });
});

我希望我可以通过单击三个标题按钮中的任何一个来打开 header-1 的子项目
但它不起作用。只有第三个按钮可以使用。
我认为我的 jquery 会有一些变化。
帮帮我，我不清楚。

Answer 1

.next('.content') 仅查看下一个元素，如果它与 '.content' 匹配，则使用它，否则忽略它。 .nextAll 获取其前面的所有下一个元素，并将 :first 放在类名后面意味着它只会选择找到的第一个元素。

jQuery(document).ready(function() {
    jQuery(".content").hide();
    jQuery(".heading").click(function() {
        jQuery(this)
            .nextAll(".content:first").slideToggle(500)
            .siblings(".content").slideUp(500);
    });
});

示例:http://jsfiddle.net/KP55t/