折叠切换开关时删除类

Question

我正在尝试在折叠时从正文中删除slideToggle类。现在，它在单击正文时删除类，并在菜单打开slidetoggle时再次添加类。

行为演示：https://jsfiddle.net/7awLhv9t/1/

当单击正文时，它会折叠菜单并从正文中删除类，但是当我们单击菜单项折叠时，它不会从正文中删除类。

我尝试了if ($(".menu-item").hasClass("active")) { $( "body" ).removeClass( "menu-is-active" );但它以更糟糕的方式破坏了代码。

Answer 1

要完成这项工作，您首先需要停止单击a元素向上传播 DOM。这是由于您还放置在document本身上的click处理程序，以便在关闭所有菜单时删除样式。

其次，您可以使用toggleClass()仅在菜单处于活动状态时将类应用于body。试试这个：

jQuery(document).ready(function($) {
$(".nav-menu a").click(function(e) {
e.stopPropagation();
$(this).parent().toggleClass('active').find('.sub-menu').slideToggle('fast');
$(".nav-menu a").not(this).parent().removeClass('active').find('.sub-menu').slideUp('fast');
$("body").toggleClass("menu-is-active", $('.nav-menu li.active').length != 0);
});
});
$(document).on("click", function(event) {
var $trigger = $(".menu-item");
if ($trigger !== event.target && !$trigger.has(event.target).length) {
$(".sub-menu").slideUp("fast").not(this).parent().removeClass('active');
$("body").removeClass("menu-is-active");
}
});

.sub-menu {
display: none;
}
body.menu-is-active {
background: #fdff76;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav-menu">
<li>
<a herf="#">Menu Item</a>
<ul class="sub-menu">
<li class="menu-item"><a herf="#">Menu Item</a></li>
<li class="menu-item"><a herf="#">Menu Item</a></li>
<li class="menu-item"><a herf="#">Menu Item</a></li>
<li class="menu-item"><a herf="#">Menu Item</a></li>
</ul>
</li>
<li class="menu-item">
<a herf="#">Menu Item</a>
<ul class="sub-menu">
<li class="menu-item"><a herf="#">Menu Item</a></li>
<li class="menu-item"><a herf="#">Menu Item</a></li>
<li class="menu-item"><a herf="#">Menu Item</a></li>
<li class="menu-item"><a herf="#">Menu Item</a></li>
</ul>
</li>
<li class="menu-item">
<a herf="#">Menu Item</a>
<ul class="sub-menu">
<li class="menu-item"><a herf="#">Menu Item</a></li>
<li class="menu-item"><a herf="#">Menu Item</a></li>
<li class="menu-item"><a herf="#">Menu Item</a></li>
<li class="menu-item"><a herf="#">Menu Item</a></li>
</ul>
</li>
<li class="menu-item">
<a herf="#">Menu Item</a>
<ul class="sub-menu">
<li class="menu-item"><a herf="#">Menu Item</a></li>
<li class="menu-item"><a herf="#">Menu Item</a></li>
<li class="menu-item"><a herf="#">Menu Item</a></li>
<li class="menu-item"><a herf="#">Menu Item</a></li>
</ul>
</li>
<li class="menu-item">
<a herf="#">Menu Item</a>
<ul class="sub-menu">
<li class="menu-item"><a herf="#">Menu Item</a></li>
<li class="menu-item"><a herf="#">Menu Item</a></li>
<li class="menu-item"><a herf="#">Menu Item</a></li>
<li class="menu-item"><a herf="#">Menu Item</a></li>
</ul>
</li>
<li class="menu-item">
<a herf="#">Menu Item</a>
<ul class="sub-menu">
<li class="menu-item"><a herf="#">Menu Item</a></li>
<li class="menu-item"><a herf="#">Menu Item</a></li>
<li class="menu-item"><a herf="#">Menu Item</a></li>
<li class="menu-item"><a herf="#">Menu Item</a></li>
</ul>
</li>
</ul>