Question

PHP代码输出HTML结构 -

<ul class="menu">
    <li><a href="link">LINK 1</a></li>
    <li><a href="link">LINK 2 (has sub-menu)</a>     <!-- click disabled -->  
        <ul class="sub-menu">
            <li><a href="link">LINK 3</a></li>
            <li><a href="link">LINK 4</a></li>
        </ul>
    </li>
    <li><a href="link">LINK 5</a></li>
    <li><a href="link">LINK 6 (has sub-menu)</a>     <!-- click disabled -->
        <ul class="sub-menu">
            <li><a href="link">LINK 7</a></li>
            <li><a href="link">LINK 8</a></li>
            <li><a href="link">LINK 9</a></li>
        </ul>
    </li>
    <li><a href="link">LINK 10</a></li>
    <li><a href="link">LINK 11</a></li>
</ul>

点击时打开sub-menu的jQuery就是这样 -

$(document).ready(function(){
    var li = $('.menu>li',this).has('.sub-menu');
    $('>a',li).click(function(e){
            e.preventDefault();
            $(e.target).next().toggle();
    });
});

这是有效的 fiddle 。

我想要实现的是，任何时刻都只能打开一个.sub-menu。也就是说，如果已经打开了一个.sub-menu，则点击打开第二个.sub-menu必须关闭之前的.sub-menu。我该如何修改功能？

Answer 1

试试这个：

    $(document).ready(function(){
       var li = $('.menu>li',this).has('.sub-menu');
        $('>a',li).click(function(e){
           e.preventDefault();
           $(e.target).next().toggle();

           $(e.target).parent().siblings().find("ul.sub-menu:visible").hide();
    });
});

$(e.target).parent().siblings().find("ul.sub-menu:visible").hide();遍历父元素，查看它的兄弟姐妹，找到任何可见的子菜单并隐藏它们

Answer 2

在处理程序中添加代码以在打开一个

之前关闭任何打开的子菜单

$(document).ready(function(){
    var li = $('.menu>li',this).has('.sub-menu');
    $('>a',li).click(function(e){
        e.preventDefault();
        $('.sub-menu').hide();
        $(e.target).next().show();
    });
});

DEMO

在点击主菜单li＆gt; a时一次只打开一个子菜单

2 个答案: