クリックすると1つのリールが除かれます

Question

私はクリックしたときに1つのリールを除外する必要があるレスポンシブメニューを持っています。

メニューをクリックしたときに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

あなたは、セレクタ内iconクラスでリーをフィルタリングすることができます：$("ul.menu li:not(.icon) a")

また、sidenoteとして、2番目のクエリの必要性を防ぐためにlistitemをバッファリングすることができます：

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

Fiddle

Answer 2

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

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

Answer 3

は、クラス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 4

そう

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

が好き:not(.icon)を使用してのような単純なものを行うことができ、それは