jquery – 代码在单击主菜单项目时打开所有子菜单

2023年7月25日 215次阅读

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>

我不想使用悬停打开子菜单,而是希望使用点击打开它
点击的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都会被打开.我只想打开当前点击的锚标签的子菜单.我怎么做？

最佳答案 试试这个：

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

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

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

点赞