我有一个菜单，点击它就会打开一个子菜单.
如果一个链接有一个下拉菜单(有header--has-submenu类)，那么点击，我会让另一个元素(.header__subContainer)出现.
我遇到的问题是逻辑问题.例如，在我的演示中，我有两个链接，what we deliver和about us，都有子菜单.
我希望用户能够点击一个链接打开它，然后点击同一个链接关闭它(标准用户体验).
然而，我也希望用户能够点击一个链接(比如说"what we Deliver) and then click onto About us to show that menus dropdown (then the user can click the About us"链接关闭菜单).
我试过toggleClass次，但这会导致上面最后一种情况出现问题.
下面是一个演示:
$(".header--has-submenu a.header__parentLink").click(function(e) {
e.preventDefault();
console.log("click");
var id = $(this).attr('data-menu');
// add active state styles to link to showcase which menu is open
$("li.header--has-submenu").removeClass("header--has-submenu--active");
$(this).parent().addClass("header--has-submenu--active");
// open subContainer (black div that contains all submenus)
if ( $(".header__subContainer-menu").hasClass("header__subContainer-menu--active") ){
$(".header__subContainer").removeClass("header__subContainer--active");
} else {
$(".header__subContainer").addClass("header__subContainer--active");
}
// remove active class from submenu, so only one menu is open at one time
$(".header__subContainer-menu").removeClass("header__subContainer-menu--active");
// open the relevant menu
$(this).closest(".header__subContainer").addClass("header__subContainer--active");
$(".header__subContainer-menu[data-menu='"+id+"']").toggleClass("header__subContainer-menu--active");
});.header {
padding: 30px 0;
}
.header__parentUl * {
color: #FFFFFF;
}
.header__li {
margin: 0 20px;
}
.header__subContainer {
display: none;
}
.header__subContainer--active {
display: block;
}
.header__subContainer-menu {
display: none;
}
.header__subContainer-menu--active {
display: block;
}
.header--has-submenu--active a {
color: green;
}
.background--black {
background: #000000;
}
.reset-list {
list-style-type: none;
margin: 0;
padding: 0;
}
.color--white {
color: #FFFFFF;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<header class="header background--black">
<div class="container">
<div class="col-xl-9 justify-content-end">
<nav class="header__menu">
<ul class="header__parentUl d-flex reset-list">
<li class="header__li header--has-submenu">
<a class="header__parentLink" href="#" data-menu="what-we-deliver">What we deliver</a>
</li>
<li class="header__li header--has-submenu">
<a class="header__parentLink" href="#" data-menu="about-us">About us</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="container-fluid background--black header__subContainer">
<div class="row justify-content-center">
<div class="col-12">
<nav class="header__subContainer-menu" data-menu="what-we-deliver">
<ul class="header__subContainer-ul d-flex reset-list">
<li class="header__subContainer-li">
<a class="header__subContainer-link color--white " href="#">Link 1</a>
</li>
<li class="header__subContainer-li">
<a class="header__subContainer-link color--white " href="#">Link 2</a>
</li>
</ul>
</nav>
<nav class="header__subContainer-menu" data-menu="about-us">
<ul class="header__subContainer-ul d-flex reset-list">
<li class="header__subContainer-li">
<a class="header__subContainer-link color--white " href="#">Link 3</a>
</li>
<li class="header__subContainer-li">
<a class="header__subContainer-link color--white " href="#">Link 4</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>