ターゲットのみLiと子供

Question

を無視するが、これは、ネストのliタグと私のHTMLコード

<ul class="nav"> 
<li class="menu"> 
    <ul class="sub_nav"> 
     <li class="sub_menu"></li> 
     <li class="sub_menu"></li> 
    </ul> 
</li> 
<li class="menu"> 
    <ul class="sub_nav"> 
     <li class="sub_menu"></li> 
     <li class="sub_menu"></li> 
    </ul> 
</li> 
</ul> 

どのクラスメニューを持つ唯一のliタグを選択して、クラスsub_menuで子どもたちの選択を解除

jQuery("li.menu :not('li.sub_menu')").click(function(
      jQuery(this).toggleClass("active") 
}) 

Answer 1

であるあなたは、何かを行うことができますこのように、クリックされた項目がセレクタ要素であるかどうかをチェックします。そうでない場合は、falseを返し、イベントが親にバブルするのを止めます。

$("li.menu").click(function(event) { 
 
    if (event.target !== this) { 
 
    return false; 
 
    } 
 
    $(this).toggleClass("active"); 
 
});

li.menu.active { 
 
    color: red; 
 
} 
 

 
li.sub_menu { 
 
    color: initial; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="nav"> 
 
    <li class="menu"> 
 
    menu 
 
    <ul class="sub_nav"> 
 
     <li class="sub_menu">submenu</li> 
 
     <li class="sub_menu">submenu</li> 
 
    </ul> 
 
    </li> 
 
    <li class="menu"> 
 
    menu 
 
    <ul class="sub_nav"> 
 
     <li class="sub_menu">submenu</li> 
 
     <li class="sub_menu">submenu</li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 2

シンプルなソリューション：

$(".nav > li").click(function(){ 
    jQuery(this).toggleClass("active") 
}); 

あなたはまだ、私が想像しないが、唯一の親liの子として、他のliノードを選択します問題がある。

Answer 3

私はあなたのように、あなたのCSSを経由してサブメニューのデフォルトの色を定義する必要がありますと思う：

.menu, .sub_nav, .active .sub_nav{ 
    color: #555; 
} 

そしてだけ.navの直接の子にアクティブなクラスを適用します。

それと、@ H77のJSコード（clickイベントをトップレベルのliにターゲティングする）を組み合わせることは、このトリックを行うべきです。

デモは、以下を参照してください：

$(function() { 
 
    $(".nav > li.menu").click(function() { 
 
    if (event.target !== this) { 
 
     return false; 
 
    } 
 

 
    $(this).toggleClass("active"); 
 
    }); 
 
});

li.active.menu { 
 
    color: red; 
 
} 
 

 
.menu, 
 
.sub_nav, 
 
.active .sub_nav { 
 
    color: #555; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="nav"> 
 
    <li class="menu"> 
 
    menu 
 
    <ul class="sub_nav"> 
 
     <li class="sub_menu">submenu</li> 
 
     <li class="sub_menu">submenu</li> 
 
    </ul> 
 
    </li> 
 
    <li class="menu"> 
 
    menu 
 
    <ul class="sub_nav"> 
 
     <li class="sub_menu">submenu</li> 
 
     <li class="sub_menu">submenu</li> 
 
    </ul> 
 
    </li> 
 
</ul>