0

我的 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();
4

5 回答 5

2

因为 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();
});
于 2013-06-28T05:30:01.533 回答
1

.advanced不是.grp元素的兄弟，它是父.normal元素的兄弟

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

javascript相等将是

$('.normal').on('click', '.toggle-advanced', function(){
    $(this).closest('.normal').siblings('.advanced').slideToggle();
})
于 2013-06-28T05:30:53.237 回答
1

你可以试试这个

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

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

});

这段代码是基于jquery的

于 2013-06-28T05:31:12.863 回答
1

这应该有效。

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

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

于 2013-06-28T05:35:23.597 回答
1

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

尝试这个：

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

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

于 2013-06-28T05:35:30.867 回答