javascript - 現在の外側の要素の別の要素に影響を与える

Question

<div class="test">
 <button>Example</button>
 <div class="example" style="display:none;">Blah</div>
</div>

<div class="test">
 <button>Example</button>
 <div class="example" style="display:none;">Another</div>
</div>

がクリックされたらbuttonしたいのです.exampleが、現在の にあるもの.showだけです。.example.test

Answer 1

特定の HTML で機能する別の方法:

$('button').click(function(){
    $(this).next('.example').show();
});

Answer 2

これはあなたが言ったことを正確に行います：

$('button').click(function(){
    $(this).closest('.test').find('.example').show();
});

これは投稿したマークアップでも機能しますが、ボタン と.exampleが兄弟でない場合は機能しません。

$('button').click(function(){
    $(this).siblings('.example').show();
});

Answer 3

Hiyaここであなたのケースの動作デモ: http://jsfiddle.net/4bLZF/

これはslideToggle http://api.jquery.com/slideToggle/を使用します

コード

  $(document).ready(function () {

    // Watch for clicks on the "slide" link.
    $('button').click(function () {
        $(this).next(".example").slideToggle(400);
        return false;
    });


});​