Question

我有一个自适应菜单，我需要在点击时排除单个符号。

基本上，jQuery在单击菜单时更改活动元素，但当屏幕调整为较小尺寸时，菜单隐藏在3行图标后面。

我不希望3行图标获取活动状态。这是怎么做的？

我的HTML：

<nav>
    <ul class="menu" id="myTopnav">
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
        <li class="icon">
            <a href="javascript:void(0);" style="font-size: 0.9375em;" onclick="myFunction()">☰</a>
        </li>
    </ul>
</nav>

我的jQuery：

$(document).ready(function () {

    $("ul.menu li a").click(function () {
        $("ul.menu li a").not(this).removeClass("active");
        $(this).toggleClass("active");
    });
});

谢谢大家。

Answer 1

$("ul.menu li a").not("li.icon").click(function () {

http://api.jquery.com/not/

Answer 2

您可以检查主持人的父母是否拥有课程icon：

$(document).ready(function () {

    $("ul.menu li a").click(function () {
        if(!$(this).closest('li').hasClass('icon')){
        $("ul.menu li a").not(this).removeClass("active");
        $(this).toggleClass("active");
    }
    });
});

Answer 3

您可以使用选择器内的icon类过滤掉li：$("ul.menu li:not(.icon) a")

另外，作为旁注，您可以缓冲列表项以防止需要第二个查询：

var lis = $("ul.menu li:not(.icon) a").click(function () {
        lis.not(this).removeClass("active");
        $(this).toggleClass("active");
    });

Fiddle

Answer 4

你可以做一些像使用$("ul.menu li:not(.icon) a").click(function () { $("ul.menu li a").not(this).removeClass("active"); $(this).toggleClass("active"); });一样简单的事情

:help fold-commands

让我知道是否有帮助

单击时排除单个li a

4 个答案: