當點擊時排除單個li a

我有一個響應菜單，我需要在點擊時排除單個li a。當點擊時排除單個li a

基本上，當點擊菜單時，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"); 
    }); 
});

感謝所有。

來源

2016-07-27 Flemming Lemche

您可以過濾掉李與選擇裏面的icon類：$("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

來源

2016-07-27 09:32:26

工作完美！謝謝。旁註非常好。不知道它是否會使腳本更快。 –

很高興幫助:)緩衝項目的性能增益可能可以忽略不計，但通常它也有助於可維護性使選擇器只有一次，以防它在未來的適應中發生變化。可能無關緊要，但這是生活中的小事...... :) –

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

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

來源

2016-07-27 09:31:15

請給上下文的一點點簡單的事情。純代碼或僅鏈接的答案質量不高。 –

我可以讓代碼工作。上面這個和下面的答案按我的意思工作。在寫這個問題之前，我實際上嘗試了類似的東西。 –

在上面的評論中應該有一個「不」。對不起。 –

您可以檢查錨的父有類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"); 
    } 
    }); 
});

來源

2016-07-27 09:31:33

工作完美！雖然比上面的答案稍高一點。謝謝。 –

@FlemmingLemche你可以至少upvote這兩個答案 –

當然沒有問題，但因爲我有不到15的聲譽系統不會改變，即使我upvote你的答案。對不起。 –

你可以做的是使用:not(.icon)像這樣

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

讓我知道，如果它可以幫助

來源

2016-07-27 09:39:19

工作完美！謝謝。 –

當點擊時排除單個li a

回答

相關問題