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);
    });
});

我希望我可以通过点击三个标题按钮中的任意一个来打开标题-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/

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);
            });
        });

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

2 个答案: