2

同じクラスを持つ多数の要素と、クリックすると表示されるコンテンツが必要ですが、現在、それらのすべてが同じクラスを持っているため、すべてが一度に開きます。

クリックしたものだけが開き、他のものは開かないようにするにはどうすればよいですか?

私のHTML：

<div class="product">
    <p><a href="#">click</a></p>

    <div class="product_inner">
    <p>show me</p>
    </div>

</div>
    <div class="product">
    <p><a href="#">click</a></p>

    <div class="product_inner">
    <p>show me</p>
    </div>

</div>
    <div class="product">
    <p><a href="#">click</a></p>

    <div class="product_inner">
    <p>show me</p>
    </div>

</div>

JQuery:

$(document).ready(function() {
$('.product p a').click(function() {
$('.product_inner').slideToggle(300);
}); // end click

}); // end ready
4

2 に答える 2

2

セレクターを実行すると、ドキュメント内のすべての要素が見つかります。実際に操作したい要素を見つけることです。

$(document).ready(function() {
    $('.product p a').click(function() {
        $(this) // the current a-element that was clicked
            .parent() // p
                .next() // find the next element from <p> (.product_inner) 
                    .stop() // stop animation
                    .slideToggle(300); // Slide toggle
    }); // end click

}); // end ready

または別のアプローチ：

$(document).ready(function() {
    $('.product p a').click(function() {
        $(this) // the current a-element that was clicked
            .closest('.product') // .product
                .find('.product_inner') // find .product_inner inside .product
                    .stop() // stop animation
                    .slideToggle(300); // Slide toggle
    }); // end click

}); // end ready

別の html マークアップがある場合。

于 2013-01-24T09:13:40.897 に答える
1

これを試して

JS コード

$(document).ready(function() {
   $('.product p a').click(function() {
      $(this).parent('p').siblings('.product_inner').slideToggle(300);
    }); // end click

});

ライブデモ

于 2013-01-24T09:25:32.370 に答える