目标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和忽视儿童

回答

相关问题