是否可以显示一个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);
    });
});

我希望我可以通过点击三个标题按钮中的任何一个打开标题-1的子项目,
但它不起作用.只有第3个按钮正常工作.
我认为我的jquery会有一些变化.
帮助我,我不清楚.

Answer 1

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

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/