При открытом label, автоматически закрывать его при закрытии бургера
У меня есть меню с вложенными ссылками, при сворачивании схлопывает в бургер, когда мы открываем бургер меню и раскрываем вложенный список и если закрываем сам бургер, то у нас не закрывается открытый label и меню не уезжает вверх. Приложила фото, как это выглядит. Как правильно задать функцию, на автоматическое закрытие всех label при закрытии меню? Закинула весь код со стилями, чтобы было удобнее.
$(document).ready(function() {
let headerBurger = $(".menu-burger__header");
let headerBurgerMenu = $(".menu-burger__header + .header__nav");
let imgBurger = $(".menu-burger_img");
let imgBurgerMenu = $(".menu-burger_img + .header__nav");
let imgActive = $(".avatar_img");
headerBurger.on("click", function() {
if (headerBurger.hasClass("open-menu")) {
$("body").removeClass("fixed-page");
} else {
$("body").addClass("fixed-page");
}
$(this).toggleClass("open-menu");
headerBurgerMenu.toggleClass("open-menu");
imgBurger.removeClass("open-img");
imgBurgerMenu.removeClass("open-img");
imgActive.removeClass("img_active");
});
imgBurger.on("click", function() {
if (imgBurger.hasClass("open-img")) {
$("body").removeClass("fixed-page");
} else {
$("body").addClass("fixed-page");
}
$(this).toggleClass("open-img");
imgBurgerMenu.toggleClass("open-img");
headerBurger.removeClass("open-menu");
headerBurgerMenu.removeClass("open-menu");
imgActive.toggleClass("img_active");
});
});
* {
margin: 0;
padding: 0;
font-family: "Montserrat";
}
/* АНИМАЦИЯ МЕНЮ */
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav a {
display: block;
text-decoration: none;
outline: none;
transition: 0.4s ease-in-out;
}
.topmenu {
backface-visibility: hidden;
background: rgba(255, 255, 255, 0.8);
}
.topmenu>li {
display: inline-block;
position: relative;
}
.down:after {
content: url(img/chevron.svg);
margin-left: 5px;
position: absolute;
top: -2px;
}
.topmenu li a:hover {
color: #ef6705;
}
.header_link:hover {
box-shadow: 0px 10px 10px -5px rgba(239, 103, 5, 0.6);
}
.submenu {
background: rgba(255, 255, 255, 0.9);
position: absolute;
left: 0;
visibility: hidden;
opacity: 0;
z-index: 5;
transform: perspective(600px) rotateX(-90deg);
transform-origin: 0% 0%;
transition: 0.5s ease-in-out;
min-width: max-content;
}
.menu>li {
padding: 0 25px;
}
.topmenu>li:hover .submenu {
visibility: visible;
opacity: 1;
transform: perspective(600px) rotateX(0deg);
}
.submenu li a {
color: #7f7f7f;
font-size: 13px;
line-height: 36px;
padding: 0 25px;
font-family: "Kurale", serif;
}
/* БУРГЕР */
.header_link {
color: #242e31;
text-decoration: none;
font-weight: 600;
display: block;
color: #333;
padding: 10px;
}
.header_list {
display: none;
}
.container {
display: flex;
justify-content: center;
flex-grow: 1;
width: 100%;
}
.content-wrapper {
width: 100%;
}
.content-wrapper {
margin-top: 78px;
padding: 10px;
line-height: 34px;
}
.header__nav {
display: flex;
align-items: center;
}
.acor-container {
display: none;
}
@media (max-width: 1130px) {
.menu_home {
display: none !important;
}
.acor-container {
display: block !important;
text-align: center;
}
.header_box {
flex-direction: row-reverse;
justify-content: end !important;
}
.container {
justify-content: end;
flex-grow: 0;
z-index: 2;
width: auto;
}
.header__nav {
display: block;
position: absolute;
right: 0;
background: rgb(245, 246, 246);
width: 100%;
box-shadow: 0 4px 2px -2px rgba(36, 36, 36, 0.37);
transition: all 0.8s ease;
top: -300%;
}
.down:after {
top: 9px;
}
.header__menu {
position: absolute;
top: 34px;
border-radius: 0 0 30px 30px;
width: 100%;
display: flex;
flex-direction: column;
}
.header__nav.open-menu {
top: 55px;
}
.header__menu li {
margin: 0 auto;
padding: 10px 0;
}
.menu>li:after {
content: "";
display: block;
width: 0;
border-bottom: 1px solid #ef6705;
transition: 0.3s;
filter: blur(1px);
}
.menu>li:hover:after {
content: "";
display: block;
width: 150%;
border-bottom: 1px solid #ef6705;
position: absolute;
bottom: 0;
right: 50%;
transform: translate(50%, 0%);
filter: blur(1px);
}
.menu-burger__header {
position: relative;
width: 34px;
height: 34px;
display: block;
margin-left: 10px;
border: 1px solid #ef6705;
border-radius: 10px;
}
.menu-burger__header span,
.menu-burger__header:after,
.menu-burger__header:before {
height: 2px;
width: 60%;
left: 7px;
display: flex;
margin: 0 auto;
position: absolute;
border-radius: 1px;
background: #515758;
}
.menu-burger__header span {
top: 16px;
}
.menu-burger__header:after,
.menu-burger__header:before {
content: "";
}
.menu-burger__header:after {
bottom: 5px;
}
.menu-burger__header:before {
top: 5px;
}
.menu-burger__header.open-menu span {
opacity: 0;
transition: 0.5s;
}
.menu-burger__header.open-menu:before {
transform: rotate(38deg);
top: 16px;
transition: 0.4s;
}
.menu-burger__header.open-menu:after {
transform: rotate(-38deg);
bottom: 16px;
transition: 0.4s;
}
.content-wrapper {
margin-top: 48px;
}
.fixed-pade {
overflow: hidden;
}
/* СТИЛЬ ЛК */
.header_photo {
width: 10% !important;
}
.header_right {
margin-right: 20px;
}
.header__nav.open-img {
top: 55px;
}
}
/* СТИЛИ ЛК */
@media (max-width: 768px) {
.header_right {
display: none !important;
}
.burger_icon {
display: block !important;
}
}
/* Бургер ЛК */
@media (max-width: 768px) {
.menu-burger_img {
position: relative;
}
.img_active {
box-shadow: 0 0 10px #ef6705;
border-radius: 20px;
}
.header_nav {
display: block !important;
position: absolute;
top: 55px;
background: rgb(245, 246, 246);
width: 100%;
box-shadow: 0 4px 2px -2px rgba(36, 36, 36, 0.37);
transition: all 0.8s ease;
right: -100%;
}
}
.header_nav {
display: flex;
align-items: center;
}
/* Хедер*/
.header {
box-shadow: 0px 10px 50px 5px rgba(0, 0, 0, 0.25);
box-sizing: border-box;
position: relative;
}
.header_wrap {
max-width: 1200px;
margin: auto;
display: flex;
align-items: center;
padding: 15px 0;
}
.header_box {
display: flex;
flex-grow: 1;
justify-content: space-between;
align-items: center;
margin-right: 10px;
}
.header_logos {
display: flex;
align-items: center;
margin-left: 10px;
}
.logo1 {
margin-left: 5px;
margin-bottom: 8px;
}
.header_navigation {
max-width: 720px;
width: 100%;
}
.header_navigation>ul {
display: flex;
justify-content: space-between;
}
.header_navigation>ul>li {
list-style-type: none;
}
.navigation__link {
text-decoration: none;
color: #000;
/* font-family: "Montserrat-Regular"; */
font-size: 14px;
}
.singup_btn {
border-radius: 50px;
background-color: #ffffff;
font-family: "Montserrat-Regular";
font-size: 18px;
color: #000;
padding: 5px 35px;
border: 1px solid #ef6705;
margin-right: 10px;
cursor: pointer;
}
.singup_btn_img {
border: none;
outline: none;
background: none;
display: none;
position: absolute;
right: -20px;
bottom: 24px;
}
.singup_btn_img>img {
width: 15%;
}
/* СТИЛИ ЛК */
.header_right {
display: flex;
justify-content: end;
align-items: center;
}
.header_link_lk {
text-decoration: none;
margin-right: 20px;
}
.header_photo {
width: 15%;
border-radius: 50px;
}
.burger_icon {
display: none;
}
/* АККОРДЕОН в бургере*/
.acor-container {
margin: 20px 0;
display: none;
}
.acor_a {
font-family: "Montserrat-Regular";
font-size: 14px;
padding: 10px 0;
color: #000;
}
.acor-container .acor-body {
width: 100%;
color: black;
margin: 0 auto;
height: 0;
color: rgba(0, 0, 0, 0);
transition: padding 0.5s;
overflow: hidden;
font-family: "Montserrat-Regular";
font-size: 14px;
}
.acor-container .acor-body p {
margin: 0 0 10px;
}
.acor-container label {
cursor: pointer;
display: block;
padding: 7px 20px;
width: 100%;
color: black;
box-sizing: border-box;
z-index: 100;
font-family: "Montserrat-Regular";
font-size: 14px;
position: relative;
}
.acor-container input {
display: none;
}
.acor-container label:before {
content: "\276F";
float: right;
}
.acor-container input:checked+label:before {
transition: transform 0.35s;
transform: rotate(90deg);
}
.acor-container input:checked+label+.acor-body {
height: auto;
margin-top: -5px;
color: #000;
padding-top: 10px;
display: flex;
flex-direction: column;
}
.acor_a_wrap {
position: relative;
}
.acor-container label:after,
.acor_a:after {
content: "";
display: none;
border-bottom: 1px solid #ef6705;
filter: blur(1px);
}
.acor-container label:hover:after,
.acor_a:hover:after {
content: "";
display: block;
width: 20%;
border-bottom: 1px solid #ef6705;
position: absolute;
bottom: 0;
right: 50%;
transform: translate(50%, 0%);
filter: blur(1px);
}
.acor-container label:hover,
.acor_a:hover {
color: #ef6705;
}
<header class="header">
<div class="header_wrap">
<div class="header_logos">
<a href="#"><img src="img/logo_vro.svg" alt="logo"></a>
<img src="img/logo_rso.svg" alt="logo1" class="logo1">
</div>
<div class="header_box">
<div class="container header__container">
<div class="menu-burger__header">
<span></span>
</div>
<nav class="header__nav">
<ul class="menu header__menu topmenu menu_home">
<li><a class="navigation__link" href="#">Главная</a></li>
<li><a href="#" class="down navigation__link">О нас</a>
<ul class="submenu ul_about">
<li><a class="header_link navigation__link" href="#">Российские Студенческие
Отряды</a></li>
<li><a class="header_link navigation__link" href="#">Волгоградское Региональное
Отделение</a></li>
<li><a class="header_link navigation__link" href="#">Контакты</a></li>
<li><a class="header_link navigation__link" href="#">Галерея</a></li>
<li><a class="header_link navigation__link" href="#">Новости</a></li>
</ul>
</li>
<li><a href="#" class="down navigation__link">Мероприятия</a>
<ul class="submenu ul_events">
<li><a class="header_link navigation__link" href="#">Поиск по категориям</a></li>
<li><a class="header_link navigation__link" href="#">Календарь мероприятий</a></li>
<li><a class="header_link navigation__link" href="#">Мои мероприятия</a></li>
</ul>
</li>
<li><a href="#" class="down navigation__link">Вступление</a>
<ul class="submenu ul_entry">
<li><a class="header_link navigation__link" href="#">Как вступить</a></li>
<li><a class="header_link navigation__link" href="#">Направления</a></li>
<li><a class="header_link navigation__link" href="#">Отряды</a></li>
</ul>
</li>
<li><a href="#" class="down navigation__link">Трудоустройство</a>
<ul class="submenu ul_job">
<li><a class="header_link navigation__link" href="#">Общая информация</a></li>
<li><a class="header_link navigation__link" href="#">Объекты</a></li>
</ul>
</li>
</ul>
<div class="acor-container header__menu topmenu">
<div class="acor_a_wrap">
<a class="acor_a" href="index.html">Главная</a>
</div>
<input type="checkbox" name="acor" id="acor2" />
<label for="acor2">О нас</label>
<div class="acor-body">
<a class="header_link navigation__link" href="coming_soon_page.html">Российские Студенческие Отряды</a>
<a class="header_link navigation__link" href="coming_soon_page.html">Волгоградское Региональное
Отделение</a>
<a class="header_link navigation__link" href="coming_soon_page.html">Контакты</a>
<a class="header_link navigation__link" href="coming_soon_page.html">Галерея</a>
<a class="header_link navigation__link" href="coming_soon_page.html">Новости</a>
</div>
<input type="checkbox" name="acor" id="acor3" />
<label for="acor3">Мероприятия</label>
<div class="acor-body">
<a class="header_link navigation__link" href="coming_soon_page.html">Поиск по категориям</a>
<a class="header_link navigation__link" href="coming_soon_page.html">Календарь мероприятий</a>
<a class="header_link navigation__link" href="coming_soon_page.html">Мои мероприятия</a>
</div>
<input type="checkbox" name="acor" id="acor4" />
<label for="acor4">Вступление</label>
<div class="acor-body">
<a class="header_link navigation__link" href="coming_soon_page.html">Как вступить</a>
<a class="header_link navigation__link" href="coming_soon_page.html">Направления</a>
<a class="header_link navigation__link" href="coming_soon_page.html">Отряды</a>
</div>
<input type="checkbox" name="acor" id="acor5" />
<label for="acor5">Трудоустройство</label>
<div class="acor-body">
<a class="header_link navigation__link" href="coming_soon_page.html">Общая информация</a>
<a class="header_link navigation__link" href="coming_soon_page.html">Объекты</a>
</div>
</div>
</nav>
</div>
<form action="/login">
<div class="header_right">
<a class="header_link_lk" href="#">Личный кабинет</a>
<img class="header_photo" src="img/lk.png" alt="avatar">
</div>
<div class="burger_icon">
<div class="container header__container">
<div class="menu-burger_img">
<img class="avatar_img" src="img/avatar.svg" alt="avatar icon">
</div>
<nav class="header__nav">
<ul class="menu header__menu topmenu">
<li><a class="navigation__link" href="#">Профиль</a></li>
<li><a href="#" class="navigation__link">Мой отряд</a></li>
<li><a href="#" class="navigation__link">Мои мероприятия</a></li>
<li><a href="#" class="navigation__link">Настройки</a></li>
</ul>
</nav>
</div>
</div>
</form>
</div>
</div>
</header>
Источник: Stack Overflow на русском