遍历到与单击的元素最近的元素jquery

Question

我的html中有这样的设置。

<section class="grp">
  <ul class="normal">
    <li>Normal Thing <button class="toggle-advanced">toggle advanced</button></li>
  </ul>
  <ul class="advanced">
    <li>This is Advanced</li>
  </ul>
</section>
<h1>Another Thing</h1>
<section class="grp">
  <ul class="normal">
    <li>Normal Thing <button class="toggle-advanced">toggle advanced</button></li>
  </ul>
  <ul class="advanced">
    <li>This is Advanced</li>
  </ul>
</section>

如果我点击ul.normal中的按钮，如何切换“高级”ul

我在coffeescript中尝试这样做

$('.normal').on 'click', '.toggle-advanced', (e) ->
  $(@).closest('.grp').siblings('.advanced').slideToggle();

Answer 1

由于jquery是标记的.使用jquery

$('.toggle-advanced').click(function(){
    $(this).parents('ul.normal').siblings('ul.advanced').toggle();
});

或

$('.toggle-advanced').click(function(){
    $(this).parents('.grp').find('ul.advanced').toggle();
});

这些应该是有效的，除非你是动态添加内容..如果是动态添加，则使用on()

$('.normal').on('click', '.toggle-advanced', function(){
   $(this).parents('.grp').find('ul.advanced').toggle();
});

Answer 2

.advanced不是.grp元素的同级元素，而是父.normal元素的同级元素

$(@).closest('.normal').siblings('.advanced').slideToggle();

javascript等价物将是

$('.normal').on('click', '.toggle-advanced', function(){
    $(this).closest('.normal').siblings('.advanced').slideToggle();
})

Answer 3

你可以试试这个

$(".toggle-advanced").on('click', function(){

    $(this).closest(".normal").siblings('.advanced').slideToggle();

});

此代码基于jquery