除$(this).next()外，使用类切换元素

Question

我正在尝试创建一个嵌套无序列表的手风琴效果。

<script>
$(document).ready(function(){
    $('a').click(function(){
        $('.open').toggle();
        active = $(this).next().toggle();
        active.addClass('open');
    });
});
</script>

在上面的代码中，我知道它用一个"open"类关闭了所有东西，我知道为什么，但是我希望添加代码来跳过变量"active"中指示的元素。

如果有帮助，这里是我的完整代码:

<style>
ul {
    display:none;
}

</style>

<script>
$(document).ready(function(){
    $('a').click(function(){
        $('.open').toggle();
        active = $(this).next().toggle();
        active.addClass('open');
    });
});
</script>

<a href="#" id="toggle">toggle menu</a>
<ul id="menu">
<li>
    <a href="#">cool 1</a>
    <ul>
        <li><a href="#">cool 1</a>
            <ul>
                <li>hey 1</li>
                <li>hey 2</li>
            </ul>
        </li>
        <li><a href="#">cool 2</a>
            <ul>
                <li>hey 1</li>
                <li>hey 2</li>
            </ul>
        </li>
        <li><a href="#">cool 3</a></li>
    </ul>
</li>
<li><a href="#">cool 2</a></li>
<li>
    <a href="#">cool 3</a>
    <ul>
        <li><a href="#">cool 1</a>
            <ul>
                <li>hey 1</li>
                <li>hey 2</li>
            </ul>
        </li>
        <li><a href="#">cool 2</a></li>
        <li><a href="#">cool 3</a></li>
    </ul>
</li>
</ul>

Answer 1

您可以使用siblings()来跳过选择器中的元素

Answer 2

Try

$(document).ready(function(){
    $('a').click(function(){
        var $this = $(this);
        var $ul = $this.next().toggle().addClass('open');
        $('.open').not($this.parents().add($ul)).hide().removeClass('open')
    });
});

演示:小提琴

Answer 3

可以使用。toggleclass ()

演示

$(document).ready(function(){
    $('a').click(function(){
        var $this = $(this);
        var $ul = $this.next().toggle().toggleClass('open');
        $('.open').not($this.parents().add($ul)).hide()
    });
});

Answer 4

保持代码简洁。我假设您希望子条目记住它们的状态。

其次，我将提供一个额外提示，即您应该使用委托处理程序。如果您决定动态添加菜单，这将有助于代码维护。我把它放在body这里，但你可能想定义/使用某种包装div或等效的

小提琴

$('body').on('click','a', function(){
    $(this).siblings('ul').toggleClass('open');
});