Question

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

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

使用上面的代码我知道它用一个“打开”类关闭所有内容，我知道为什么，但我希望添加代码来跳过变量“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

尝试

$(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')
    });
});

演示：Fiddle

Answer 3

您可以使用.toggleClass()。

Demo

$(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或同等的

Fiddle

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

除了$（this）.next（）之外，用类切换元素

4 个答案:

Demo

Fiddle