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>

我不想使用sub-menu打开hover，而是希望使用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();
    });
});

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

Answer 1

试试这个：

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

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

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

Answer 2

您是否尝试过使用this关键字？在点击处理程序中，尝试将'.sub-menu',li替换为this。有关此次访问的详细信息，请访问：https://api.jquery.com/click/

Answer 3

在这种情况下，最有效的代码是在<ul>上使用单个处理程序，而不是将事件侦听器附加到所有<li>。

$('ul.menu').on('click', 'li', function(e){
    var target = $(e.target);
    ...and so on ...
});

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

3 个答案: