影响其他元素当前外部元件

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，而只是说在目前的.test的.example。

Answer 1

这会对你说什么：

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

这工作太为您发布的标记，但它不会工作，如果按钮和.example没有兄弟姐妹：

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

Answer 2

另一种适用于您的特定HTML的方法：

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

Answer 3

Hiya 工作演示为你的情况在这里：http://jsfiddle.net/4bLZF/

这款采用slideTogglehttp://api.jquery.com/slideToggle/

代码

$(document).ready(function() { 

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


});​