1

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

<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>
4

4 回答 4

2

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

于 2013-05-09T02:23:11.063 回答
1

尝试

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

演示：小提琴

于 2013-05-09T02:27:46.780 回答
1

您可以使用.toggleClass()。

演示

$(document).ready(function(){
    $('a').click(function(){
        var $this = $(this);
        var $ul = $this.next().toggle().toggleClass('open');
        $('.open').not($this.parents().add($ul)).hide()
    });
});
于 2013-05-09T02:33:16.553 回答
0

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

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

小提琴

$('body').on('click','a', function(){
    $(this).siblings('ul').toggleClass('open');
});
于 2013-05-09T02:47:58.373 回答