jquery - 代码在单击主菜单 li 项时打开所有子菜单

Question

PHP 代码生成具有这种结构的导航菜单 -

<ul class="menu">
    <li><a href="link">LINK 1</a></li>
    <li><a href="link">LINK 2</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</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>

不必使用悬停打开子菜单，我想使用click
打开它 click 的 jQuery 是:

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

唯一的问题是，在单击时，所有带有 .sub-menu 类的 ul 都会打开。我只想打开当前单击的 anchor 标记的 子菜单。我该怎么做？

Answer 1

试试这个:

工作示例 https://jsfiddle.net/cjvwkvq9/

$("li > a")
    .on("click", function (e) {
    $(e.target).next().toggle();
});

其中 $(e.target) 是被点击的元素。