目標Li和忽視兒童

這是我與嵌套李標籤目標Li和忽視兒童

<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>

只與類菜單裏的標籤如何選擇和取消兒童類sub_menu

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

來源

2017-07-15 hamed

這不是你需要擔心本身的選擇，你可能會影響更多的點擊事件上的點擊時冒泡的DOM sub_menu列表項。您可以停止sub_menu項目上的傳播，也可以檢查菜單項上的click事件的目標。 – j08691

@ j08691我該怎麼做？ – hamed

你可以做一些HTML代碼像這樣你檢查被點擊的項目是否是選擇器元素。如果不是，則返回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>

來源

2017-07-15 16:06:06 H77

一個簡單的辦法：

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

你仍然會選擇其他li節點，但僅作爲母li的孩子，我不想像是有問題的。

來源

2017-07-15 16:16:38 Kevin

我想你必須通過你的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>

來源

2017-07-15 16:30:07 ochi

目標Li和忽視兒童

回答

相關問題