Question

我做了一些研究，似乎没有任何工作。这是HTML，后面跟着我放在一起的JavaScript。我要做的是设置它，以便每当点击dashboard_gear_options时，它会切换相应的隐藏选项行。每个代码块在页面上的不同位置存在多次。我尝试使用它，查找，父母，下一个和孩子无济于事。

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

试试这个

$(this).closest('.content_block_holder').find('.dashboard_holder').find('.hidden_options_row').toggle();

Answer 2

尝试在选择器中使用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/

Answer 3

Also this chain works：

$(this).parent().next('.dashboard_holder').children('.hidden_options_row').toggle();

或

$(this).parent().next('.dashboard_holder').find('.hidden_options_row').toggle();

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

3 个答案: