影响当前外部元素中的另一个元素

Affect another element in current outer element

本文关键字：元素 另一个 外部 影响      更新时间：2023-09-26
<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。

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

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

这将完全按照您所说的进行操作：

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

这也适用于您发布的标记，但如果按钮和.example不是同级，则不起作用：

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

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

});​
相关文章：