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中的按钮，如何切换“高级”ul.normal？

我在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

Answer 4

这应该有用。

$("ul.normal>li>button").click(function () {
   $(this).closest('.normal').siblings('.advanced').slideToggle();
});

工作示例：http://jsfiddle.net/riri78/dQcFE/

Answer 5

在Jquery中，您可以使用父和兄弟函数来获取所需的元素。

试试这个：

$('.toggle-advanced').click(function() {
  $('this').parent().siblings().toggleSomething()
});

兄弟姐妹返回给定元素的所有兄弟姐妹，在您的情况下，它将始终返回“高级”ul。

遍历最靠近元素的元素单击jquery

5 个答案: