我在下面的示例中遇到了 JQuery 问题。
$(".side-nav ul li ul:not([class*='hide'])").addClass("hide");.hide {
display: none;
}<div class="side-nav">
<ul>
<li>
<a href="#">FIRST</a>
<ul class="hide">
<li>one</li>
<li>two</li>
<li>tree</li>
</ul>
</li>
<li>
<a href="#">SECOND</a>
<ul> <!-- here need add css class="hide" -->
<li>one</li>
<li>two</li>
<li>tree</li>
</ul>
</li>
</ul>
</div>您可以迭代每个ul元素并检查它是否包含类hide
$(".side-nav ul li ul").each(function() {
if(!$(this).hasClass("hide")) {
$(this).addClass("hide");
}
}).hide {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="side-nav">
<ul>
<li>
<a href="#">FIRST</a>
<ul class="hide">
<li>one</li>
<li>two</li>
<li>tree</li>
</ul>
</li>
<li>
<a href="#">SECOND</a>
<ul> <!-- here need add css class="hide" -->
<li>one</li>
<li>two</li>
<li>tree</li>
</ul>
</li>
</ul>
</div>另一种方法是使用$(".side-nav ul li ul").addClass("hide");它只会将类添加hide到没有它的元素中，因此如果元素具有类，则不会有重复的类
$(".side-nav ul li ul").addClass("hide");.hide {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="side-nav">
<ul>
<li>
<a href="#">FIRST</a>
<ul class="hide">
<li>one</li>
<li>two</li>
<li>tree</li>
</ul>
</li>
<li>
<a href="#">SECOND</a>
<ul> <!-- here need add css class="hide" -->
<li>one</li>
<li>two</li>
<li>tree</li>
</ul>
</li>
</ul>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句