2

やあみんなこの質問であなたの最後の助けに感謝します。
1つのトグルボタンの代わりに3つのトグルボタンを使用するにはどうすればよいですか？
私の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);
    });
});

3つのヘッダーボタンのいずれかをクリックしてヘッダー1のサブアイテムを開くことができます
が、機能しません。3番目のボタンのみが機能しています。
私のjqueryにいくつかの変更があると思います。
私を助けてください私は明確ではありません。

4

2 に答える 2

5

.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/

于 2012-08-28T10:29:29.593 に答える
1 
jQuery(document).ready(function() {
            jQuery(".content").hide();
            jQuery(".heading").click(function() {

                jQuery(this)
                    .nextAll(".content").eq(0).slideToggle(500)
                    .siblings(".content").slideUp(500);
            });
        });
于 2012-08-28T11:02:12.490 に答える