使用jQuery在另一个上面查找元素

Question

我正在尝试使用以下html中的jQuery来查找元素.

<ul class="gdl-toggle-box">
   <li class="">
      <h2 class="toggle-box-title"><span class="toggle-box-icon"></span>Volunteer Form</h2>
      <div class="toggle-box-content" style="">
      </div>
   </li>
</ul>

我要做的是当点击h2时发现h2上面的li添加一个活动的类.尝试了几个不同的电话,但没有运气. 编辑

最大的问题是页面上有多个切换框,所以这样的东西适用于带有单个切换的页面,但结果多的页面都是一起打开的.

var gdl_toggle_box = jQuery('ul.gdl-toggle-box');
gdl_toggle_box.find('li').each(function(){
    jQuery(this).addClass('item');
});
gdl_toggle_box.find('li').not('.active').each(function(){
    jQuery(this).children('.toggle-box-content').css('display', 'none');
});
gdl_toggle_box.find('h2').click(function(){
    if( jQuery('.item').hasClass('active') ){
         jQuery('.item').removeClass('active').children('.toggle-box-content').slideUp();
    }else{
         jQuery('.item').addClass('active').children('.toggle-box-content').slideDown();
    }
});

Answer 1

你可以使用最近的.

closest 将匹配与遍历DOM树的选择器匹配的第一个父元素.

演示

$('h2.toggle-box-title').click(function(){
   $(this).closest('li').addClass('active');
});