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

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/

Answer 2

jQuery(document).ready(function() {
            jQuery(".content").hide();
            jQuery(".heading").click(function() {

                jQuery(this)
                    .nextAll(".content").eq(0).slideToggle(500)
                    .siblings(".content").slideUp(500);
            });
        });