打开另一个手风琴后自行关闭

Question

我希望在用户选择手风琴菜单时创建功能，它会打开该菜单并关闭其他菜单。

目前，我有一个功能，如果用户选择当前打开的菜单的顶层，它会删除该类。

但是我一直在尝试在关闭中添加所有其他功能。我意识到之前有人问过这个问题，我已经尝试实施其他非常好的建议，以获得我需要的重用。但是，我正在努力将它们与我所拥有的结构相匹配。另外，我的jQuery知识目前很弱。

有人有什么建议吗？我现在正在兜圈子。

我有以下结构。我对此没有真正的控制权，因为它是我继承的 WP、预构建的模板项目并试图硬塞功能-(简化结构以方便(

$(document).ready(function() {
$('.sidebar .menu-item-has-children').click(function(e) {
$(this).toggleClass('sub-menu-open');
});
$('.sidebar .menu-item-has-children ul li a').click(function(e) {
e.stopPropagation();
});
if ($('ul.sub-menu').find('li.current-menu-item').length !== 0) {
$('li.current-menu-item').closest('.sidebar .menu-item-has-children').addClass('sub-menu-open');
}
});

.sub-menu {
display: none;
}
.sub-menu-open .sub-menu {
display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<aside id"sidebar" class="sidebar fusion-widget-area fusion-content-widget-area fusion-sidebar-left fusion-employanapprentice-accordionmenu fusion-sticky-sidebar">
<div class="widget widget_nav_menu">
<div class="menu-employ-an-apprentice-accordion-container">
<ul id="menu-employ-an-apprentice-accordion">
<li class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="#">Link 1 - No sub menu</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children">
<a href="#">Link 2 - Has Sub menu</a>
<ul class="sub-menu">
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="#">Link 3 - No sub menu</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="#">Link 4 - No sub menu</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children">
<a href="#">Link 5 - Has Sub menu</a>
<ul class="sub-menu">
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</aside>

JS 小提琴

Answer 1

只需以这种方式添加/删除类：

$(document).ready(function() {
var allSubmenus = $('.sidebar .menu-item-has-children');
allSubmenus.click(function(e) {
var thisSubmenu = $(this);
if (thisSubmenu.hasClass('sub-menu-open')) {
thisSubmenu.removeClass('sub-menu-open');
} else {
allSubmenus.removeClass('sub-menu-open');
thisSubmenu.addClass('sub-menu-open');
};
});
});

.sub-menu {
display: none;
}
.sub-menu-open .sub-menu {
display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside id "sidebar" class="sidebar fusion-widget-area fusion-content-widget-area fusion-sidebar-left fusion-employanapprentice-accordionmenu fusion-sticky-sidebar">
<div class="widget widget_nav_menu">
<div class="menu-employ-an-apprentice-accordion-container">
<ul id="menu-employ-an-apprentice-accordion">
<li class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="#">Link 1 - No sub menu</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children">
<a href="#">Link 2 - Has Sub menu</a>
<ul class="sub-menu">
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="#">Link 3 - No sub menu</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="#">Link 4 - No sub menu</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children">
<a href="#">Link 5 - Has Sub menu</a>
<ul class="sub-menu">
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</aside>

更新的小提琴。

Answer 2

要在打开另一个菜单时关闭其他菜单，您可以使用.sub-menu-open类选择所有打开的实例，然后从中删除该类：

$(document).ready(function() {
$('.sidebar .menu-item-has-children').click(function(e) {
$('.sub-menu-open').not(this).removeClass('sub-menu-open'); // add this line
$(this).toggleClass('sub-menu-open');
});
$('.sidebar .menu-item-has-children ul li a').click(function(e) {
e.stopPropagation();
});
if ($('ul.sub-menu').find('li.current-menu-item').length !== 0) {
$('li.current-menu-item').closest('.sidebar .menu-item-has-children').addClass('sub-menu-open');
}
});

.sub-menu {
display: none;
}
.sub-menu-open .sub-menu {
display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<aside id"sidebar" class="sidebar fusion-widget-area fusion-content-widget-area fusion-sidebar-left fusion-employanapprentice-accordionmenu fusion-sticky-sidebar">
<div class="widget widget_nav_menu">
<div class="menu-employ-an-apprentice-accordion-container">
<ul id="menu-employ-an-apprentice-accordion">
<li class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="#">Link 1 - No sub menu</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children">
<a href="#">Link 2 - Has Sub menu</a>
<ul class="sub-menu">
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="#">Link 3 - No sub menu</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="#">Link 4 - No sub menu</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children">
<a href="#">Link 5 - Has Sub menu</a>
<ul class="sub-menu">
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</aside>

Answer 3

只需替换您的jquery代码即可

$('.sidebar .menu-item-has-children').click(function(e) {
$('.sidebar .menu-item-has-children').removeClass('sub-menu-open')
$(this).addClass('sub-menu-open');
});

你可以在这里查看