切换元素上的类，忽略除一个子级之外的所有子级
切换元素上的类，忽略除一个子级之外的所有子级
提问于 2019-12-05 00:43:19
即使在阅读了jQuery stopPropagation for only some class of elements、Javascript toggle class on element和无数其他参考资料后，也很难解决这个问题。
我想在点击nav > ul > li和.dd切换( .dropdown的子类)时切换类"active“，而不是切换.dropdown本身或其中的任何东西(.dd切换除外)。
<nav class="nav-dropdowns" role="navigation">
<ul>
<li class="">
<span class="dropdown-title">Price</span>
<div class="dropdown">
<a class="dd-toggle">X</a>
<div id="field-price" class="field"><label>Price Range</label>
<div class="details"></div>
</div>
</div> <button type="submit" class="extra-submit buttonstyle">Search</button>
</div>
</li>
<li class="">
<span class="dropdown-title">Type</span>
<div class="dropdown">
<a class="dd-toggle">X</a>
<div id="field-type" class="field"><label>Property Type</label>
<div class="details"></div>
</div> <button type="submit">Search</button>
</div>
</li>
<li class="search-submit">
<button class="search-button" type="submit">Search</button>
</li>
</ul>
</nav>我尝试了许多变体，从以下几个开始：
jQuery(document).ready(function($){
$( "nav > ul > li" ).click(function() {
$( this ).closest().toggleClass( "active" );
});
});然后
jQuery(document).ready(function($){
$( "nav > ul > li" ).click(function() {
$( this ).toggleClass( "active" );
});
$('.dropdown').click(function(e) {
return false;
});
});最后
jQuery(document).ready(function($){
$( "nav > ul > li" ).click(function( event ) {
event.stopImmediatePropagation();
$( this ).toggleClass( "active" ).not('.dropdown');
});
});我忽略了或最接近的孩子，但不知道如何做到这一点，但仍然观察孩子的孩子。也许只有第一个孩子？
忽略.dropdown但不忽略.dd-切换
我说得对吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-12-05 01:00:15
我真的推荐你读一下：
Decoupling Your HTML, CSS, and JavaScript。这真的会减少你紧密耦合的代码。
绿色的所有东西都会变成红色，除非你是蓝色的(绿色的)。虽然我不确定(因为你的问题不清楚)，如果你是要求在li和.dd-toggle上激活(就像现在一样)，还是只要求li上激活，这并不难。
如果您只需要在li上使用active，只需将.dd-toggle代码更改为：
$(this).parents('li').first().toggleClass('active');
$(document).ready(function() {
$("nav > ul > li").on("click", function(e) {
if ($(e.target).parents('.dropdown').length === 0 &&
!$(e.target).hasClass('dropdown')) {
$(this).toggleClass("active");
}
});
$(".dd-toggle").on("click", function(e) {
$(this).toggleClass("active");
});
});nav > ul > li, .dd-toggle {
border: 2px solid green;
cursor: pointer;
user-select: none;
}
.active {
border: 2px solid red;
}
.dropdown {
border: 2px solid blue;
cursor: default;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="nav-dropdowns" role="navigation">
<ul>
<li class="">
<span class="dropdown-title">Price</span>
<div class="dropdown">
<a class="dd-toggle">X</a>
<div id="field-price" class="field"><label>Price Range</label>
<div class="details"></div>
</div>
</div> <button type="submit" class="extra-submit buttonstyle">Search</button>
</div>
</li>
<li class="">
<span class="dropdown-title">Type</span>
<div class="dropdown">
<a class="dd-toggle">X</a>
<div id="field-type" class="field"><label>Property Type</label>
<div class="details"></div>
</div> <button type="submit">Search</button>
</div>
</li>
<li class="search-submit">
<button class="search-button" type="submit">Search</button>
</li>
</ul>
</nav>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59180869
复制相关文章
相似问题
腾讯云开发者
