I have created this menu. I want that you can only open one submenu at the time. So if you open the menu for club first and then the menu for profile, the club menu should automatically close. How can this be achieved?
Additionally: It would also be great if all submenus close when closing the hamburger in the top right corner. so that if you reopen the hamburger, the menus are all hidden if that makes any sense... https://codepen.io/bvonr/pen/oNwOjgp
(function () {
var change = document.querySelector(".burger-container"),
box = document.querySelector(".mobilenavigation"),
hider = document.querySelector(".bodyandfooter");
change.onclick = function () {
change.classList.toggle("menu-opened");
box.classList.toggle("menu-opened");
hider.classList.toggle("menu-opened");
};
})();
$(".secondLayer > .plus-button > ul").parent().parent().addClass("hasChildren");
$(".secondLayer").click(function () {
$(this).find(".plus-button").toggleClass("open");
$(this).find(".plus-button").parent().parent().toggleClass("expand");
});* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
a {
text-decoration: none;
}
.header {
width: 100%;
max-width: 100%;
background-color: brown;
display: flex;
position: fixed;
top: 0;
height: 50px;
}
.mobilenavigation {
position: absolute;
overflow: hidden;
height: 0px;
margin-top: 50px;
width: 100%;
font-size: 20px;
line-height: 40px;
}
.burger-container {
position: relative;
display: inline-block;
margin-left: auto;
height: 50px;
width: 50px;
cursor: pointer;
transform: rotate(0deg);
transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
user-select: none;
-webkit-tap-highlight-color: transparent;
}
#burger {
width: 18px;
height: 8px;
position: relative;
display: block;
margin: -4px auto 0;
top: 50%;
}
.bar {
width: 100%;
height: 1px;
display: block;
position: relative;
background: #fff;
transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition-delay: 0s;
}
.bar.topBar {
transform: translateY(0px) rotate(0deg);
}
.bar.btmBar {
transform: translateY(6px) rotate(0deg);
}
.burger-container.menu-opened {
transform: rotate(90deg);
}
.burger-container.menu-opened #burger .bar {
transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition-delay: 0.2s;
}
.burger-container.menu-opened #burger .bar.topBar {
transform: translateY(4px) rotate(45deg);
}
.burger-container.menu-opened #burger .bar.btmBar {
transform: translateY(3px) rotate(-45deg);
}
.mobilenavigation.menu-opened {
display: block;
position: absolute;
margin-top: 50px;
padding-top: 15px;
padding-bottom: 15px;
height: calc(100vh - 80px);
width: 100%;
overflow: scroll;
}
.plus-button {
height: 40px;
width: 40px;
transition: 0.3s;
cursor: pointer;
float: right;
}
.plus-icon {
display: inline-block;
width: 20px;
height: 3px;
background-color: #24603c;
border-radius: 0.75em;
transition: 0.3s;
position: relative;
left: 10px;
top: -4px;
}
.plus-icon:before {
width: 20px;
height: 3px;
border-radius: 0.75em;
transition: 0.3s;
position: absolute;
content: "";
transform-origin: 10px center;
transform: rotate3d(0, 0, 1, 90deg);
background-color: #24603c;
}
.open.plus-button .plus-icon:before {
transform: rotate3d(0, 0, 0, 90deg);
}
.hasChildren .plus-button {
display: block;
}
.menulist {
display: none;
}
.secondLayer {
float: right;
}
.expand > .menulist {
display: block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
<div class="mobilenavigation menu-opened">
<div class="navbar">
<ul class="menuliste">
<li class="menuli1">
<a href="">CLUB</a>
<div class="secondLayer">
<div class="plus-button">
<div class="plus-icon"></div>
</div>
</div>
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="#">Download</a>
</li>
<li class="menulevel1">
<a class=" " href="#">CLUB-KALENDER</a>
</li>
<li class="menulevel1">
<a class=" " href="#">RAUMBELEGUNG</a>
</li>
<li class="menulevel1">
<a class=" " href="#">FORUM</a>
</li>
</ul>
</li>
<li class="menuli1">
<a href="#">profile</a>
<div class="secondLayer">
<div class="plus-button">
<div class="plus-icon"></div>
</div>
</div>
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="#">PROFIL</a>
</li>
<li class="menulevel1">
<a class=" " href="#">Freigaben</a>
</li>
<li class="menulevel1">
<a class=" " href="#">ARTIKEL</a>
</li>
<li class="menulevel1">
<a class=" " href="#">GRUPPENLEITER</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="burger-container menu-opened">
<div id="burger">
<div class="bar topBar"></div>
<div class="bar btmBar"></div>
</div>
</div>
</div>CodePudding user response：
Just remove all expand and open before toggling if they are not belonging to this accordion
$(".secondLayer").click(function () {
const $thisPlus = $(this).find(".plus-button")
const $thisLiContainer = $(this).find(".plus-button").closest("li");
$(".open").not($thisPlus).removeClass("open");
$(".expand").not($thisLiContainer).removeClass("expand");
$thisPlus.toggleClass("open");
$thisLiContainer.toggleClass("expand");
});