javascript - 这找到另一个 div 的父级并使用 jQuery 切换它的子级

Question

我已经做了一些研究，但似乎没有任何效果。这是 HTML，后面是我放在一起的 JavaScript。我想要做的是设置它，以便每当单击 dashboard_gear_options 时，它都会切换适当的隐藏选项行。每个代码块在页面的不同位置多次出现。我尝试使用这个、find、parent、next 和 children 都无济于事。

HTML:

// start block
<div class="content_block_holder">
   <div class="content_top">
      <div class="dashboard_gear_options"></div>
      <div class="dashboard_gear_divider"></div>
   </div>
   <div class="dashboard_holder">
      <div class="hidden_options_row"></div>
   </div>
</div>
// end block

// start block
<div class="content_block_holder">
   <div class="content_top">
      <div class="dashboard_gear_options"></div>
      <div class="dashboard_gear_divider"></div>
   </div>
   <div class="dashboard_holder">
      <div class="hidden_options_row"></div>
   </div>
</div>
// end block (etc..)

JS:

$(document).ready(function(){
   $('.dashboard_gear_options').click(function(){
       $(this).parent('.content_block_holder').find('.hidden_options_row').toggle();        
    });
});

Answer 1

尝试在选择器中使用 closest([selector]) ( http://api.jquery.com/closest/ ) 而不是 parent。它将遍历树并找到“content_block_holder”。 parent([selector]) 将只检查直接父级，如果它与提供的选择器不匹配则返回一个空集。

$(document).ready(function(){
   $('.dashboard_gear_options').click(function(){
       $(this).closest('.content_block_holder').find('.hidden_options_row').toggle();        
   });
});

JSFiddle 基于您的代码:http://jsfiddle.net/gK7yM/