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

Question

我做了一些研究，但似乎没有任何效果。这是我正在组合的 HTML 和 JavaScript。我想要做的是将其设置为每当单击dashboard_gear_options 时，它都会切换相应的隐藏选项行。每个代码块在页面的不同位置多次存在。我尝试使用 this、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/ ) 而不是父级。它将遍历树并找到“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/