单击主菜单li>a时，一次只打开一个子菜单。

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>

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

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

这是工作的小提琴。

我想要实现的是，在任何时候只有一个.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();
    });
});

演示