Не могу сделать так чтоб появился блок 'sub-submenu-expandable' при нажатие на 'has-sub-submenu'
$(document).ready(function () {
$('.has-submenu').click(function () {
if ($('.has-submenu').hasClass('mobil_active')) {
/*Удаление классов вперед назад и удаление блоков*/
$(this).removeClass('mobil_active').siblings().removeClass('to-left');
$('.has-submenu').not(this).removeClass( "to-left");
$('.header-submenu').css('display', 'none');
/*------------------------------------------*/
} else {
/*Добавление классов вперед назад и блоков*/
$(this).addClass('mobil_active').siblings().removeClass('to-left');
$('.has-submenu').not(this).addClass("to-left");
$('.header-submenu').css('display', 'block');
$('.sub-submenu-expandable').addClass('to-right');
/*------------------------------------------*/
}
})
});* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
*, * :after, * :before {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (max-width: 620px) {
.has-submenu {
display: flex;
flex-direction: column;
margin-left: 20px;
}
.links {
color: black;
text-decoration: none;
}
.header-bottom-links-row > li.has-submenu > .ttl::after {
content: "";
width: 10px;
height: 17px;
background: url(mob-menu-arrow.svg) 0 0 no-repeat;
position: absolute;
right: 20px;
margin-top: -16px;
}
.ttl {
margin-bottom: 10px;
}
.ttl > a {
text-decoration: none;
}
.submenu-list {
list-style-type: none;
}
.mobil_active{
}
li.mobil_active > .ttl:after {
background-image: url(mob-menu-back.svg) !important;
left: 0 !important;
right: auto !important;
}
ul.submenu-list > li.has-sub-submenu > .ttl:after {
content: "";
width: 10px;
height: 17px;
background: url(mob-menu-arrow.svg) 0 0 no-repeat;
position: absolute;
right: 20px;
margin-top: 0;
}
.to-left {
display: none;
}
.header-submenu {
display: none;
}
.to-right {
display: none;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<ul class="header-bottom-links-row">
<li class="has-submenu">
<div class="ttl">
<a href="#" class="border_bottom">О Мгике</a>
<div class="dropdown_arrow"></div>
</div>
<div class="header-submenu">
<div class="header-submenu-cont">
<div class="header-submenu-1">
<ul class="submenu-list">
<li>
<div class="ttl">
<a href="#" class="border_bottom">Приветствие ректора</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">История МГИКа</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Структура МГИКа</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Ученый совет</a>
</div>
</li>
<li class="has-sub-submenu">
<div class="ttl">
<div class="submenu-arrow"></div>
<a href="#" class="border_bottom">Сведенья об образовательной организации</a>
</div>
<div class="sub-submenu-expandable">
<ul class="sub-submenu">
<li class="">
<a href="">
Основные сведения
</a>
</li>
<li class="">
<a href="">
Структура и органы управления образовательной организацией
</a>
</li>
<li class="">
<a href="">
Документы
</a>
</li>
<li class="">
<a href="">
Образование
</a>
</li>
<li class="">
<a href="">
Образовательные стандарты и требования
</a>
</li>
<li class="">
<a href="">
Руководство
</a>
</li>
<li class="">
<a href="">
Педагогический состав
</a>
</li>
<li class="">
<a href="">
Материально-техническое обеспечение и оснащенность
образовательного процесса. Доступная среда
</a>
</li>
<li class="">
<a href="">
Стипендии и меры поддержки обучающихся
</a>
</li>
<li class="">
<a href="">
Платные образовательные услуги
</a>
</li>
<li class="">
<a href="">
Финансово-хозяйственная деятельность
</a>
</li>
<li class="">
<a href="">
Вакантные места для приема (перевода) обучающихся
</a>
</li>
<li class="">
<a href="">
Международное сотрудничество
</a>
</li>
<li class="">
<a href="">
Организация питания в образовательной организации
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="has-submenu">
<div class="ttl">
<a href="#" class="border_bottom">Оплата</a>
<div class="dropdown_arrow"></div>
</div>
<div class="header-submenu">
<div class="header-submenu-cont">
<div class="header-submenu-1">
<ul class="submenu-list">
<li>
<div class="ttl">
<a href="#" class="border_bottom">ПАО БАНК "ФК Открытие"</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="has-submenu">
<div class="ttl">
<a href="#" class="border_bottom">Наука</a>
<div class="dropdown_arrows"></div>
</div>
<div class="header-submenu">
<div class="header-submenu-cont">
<div class="header-submenu-1">
<ul class="submenu-list">
<li>
<div class="ttl">
<a href="#" class="border_bottom">Государственная научная аттестация: присуждение ученых
степеней</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Подразделение и сотрудники</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Журналы</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Научно-творческий студенческий Альманах "Гамаюн"</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Научные мероприятия</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Результаты исследований</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Новости и Информация</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Информационные ресурсы</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Конгресс "Вузы культуры и искусств в международном
гуманитарном сотрудничестве "</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Архив конгрессов</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Национальный проект "Наука и университеты"</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Локальные нормативные акты в области науки</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Контакты</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="has-submenu">
<div class="ttl">
<a href="#" class="border_bottom">Образование</a>
<div class="dropdown_arrow"></div>
</div>
<div class="header-submenu">
<div class="header-submenu-cont">
<div class="header-submenu-1">
<ul class="submenu-list">
<li>
<div class="ttl">
<a href="#" class="border_bottom">Факультеты</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Кафедры</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Магистратура</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Аспирантура</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Ассисентура-стажировка</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Центр непрерывного образования и повышения
квалификации</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Международный отдел</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="has-submenu">
<div class="ttl">
<a href="#" class="border_bottom">Студентам</a>
<div class="dropdown_arrow"></div>
</div>
<div class="header-submenu">
<div class="header-submenu-cont">
<div class="header-submenu-1">
<ul class="submenu-list">
<li>
<div class="ttl">
<a href="#" class="border_bottom">Расписание</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Новости и обьявления</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Анонсы</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Студенческий совет</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Общежитие</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Центр непрерывного образования и повышения
квалификации</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Международный отдел</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="has-submenu">
<div class="ttl">
<a href="#" class="border_bottom">Федеральные проекты</a>
<div class="dropdown_arrow"></div>
</div>
<div class="header-submenu">
<div class="header-submenu-cont">
<div class="header-submenu-1">
<ul class="submenu-list">
<li>
<div class="ttl">
<a href="#" class="border_bottom">Федеральный проект "Творческие люди"</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Федеральный проект "Придумано в России"</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="has-submenu">
<div class="ttl">
<a href="#" class="border_bottom">Издательский центр</a>
<div class="dropdown_arrow"></div>
</div>
<div class="header-submenu">
<div class="header-submenu-cont">
<div class="header-submenu-1">
<ul class="submenu-list">
<li>
<div class="ttl">
<a href="#" class="border_bottom">Каталог книг</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Новости</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Команда издательства</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="has-submenu">
<div class="ttl">
<a href="#" class="border_bottom">Пресс-служба</a>
<div class="dropdown_arrow"></div>
</div>
<div class="header-submenu">
<div class="header-submenu-cont">
<div class="header-submenu-1">
<ul class="submenu-list">
<li>
<div class="ttl">
<a href="#" class="border_bottom">Новости</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Анонсы</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Для СМИ</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Фотогалерея</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="has-submenu">
<div class="ttl">
<a href="#" class="border_bottom">Научный журнал</a>
<div class="dropdown_arrow"></div>
</div>
<div class="header-submenu">
<div class="header-submenu-cont">
<div class="header-submenu-1">
<ul class="submenu-list">
<li>
<div class="ttl">
<a href="#" class="border_bottom">Весник</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Культура и образование: научно -информационный</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Журнал вузов культуры и искусств</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="has-submenu">
<div class="ttl">
<a href="#" class="border_bottom">Контакты</a>
<div class="dropdown_arrow"></div>
</div>
<div class="header-submenu">
<div class="header-submenu-cont">
<div class="header-submenu-1">
<ul class="submenu-list">
<li>
<div class="ttl">
<a href="#" class="border_bottom">Приёмная комиссия</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Факультеты</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Подразделения</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Адрес</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>Ответы (1 шт):
Автор решения: Jack Shepard
→ Ссылка
За основу взял ответ Льва из комментария к задаче. Чуть оптимизировал: убрал повторения и упростил код.
UPD
Я добавил уникальные идентификаторы через атрибут data-menu-id в HTML, чтобы упростить управление каждым пунктом меню. Также разделил элементы стрелок (.dropdown_arrow, .submenu-arrow) и ссылки для более точного контроля, а вложенные меню обернул в отдельные контейнеры (.header-submenu, .sub-submenu-expandable) для ясности структуры.
В jQuery упростил логику, добавив чёткое управление состояниями через классы (mobil_active) и анимации (slideDown / slideUp). События клика теперь обрабатываются отдельно для основного меню и вложенных уровней. Также добавил обработку кликов вне меню, чтобы автоматически закрывать открытые пункты, и убрал лишнее наложение событий, используя stopPropagation.
$(document).ready(function() {
// Клик по стрелке основного подменю
$('.dropdown_arrow').click(function(e) {
e.stopPropagation(); // Останавливаем всплытие, чтобы избежать лишних обработчиков
const $parent = $(this).closest('.has-submenu'); // Родительский элемент
const $submenu = $parent.find('.header-submenu'); // Его подменю
if ($parent.hasClass('mobil_active')) {
// Если меню активно, скрываем его
$parent.removeClass('mobil_active');
$submenu.slideUp(); // Анимация скрытия
} else {
// Скрываем все активные пункты
$('.has-submenu').removeClass('mobil_active');
$('.header-submenu').slideUp();
// Активируем текущий пункт меню
$parent.addClass('mobil_active');
$submenu.slideDown(); // Анимация показа
}
});
// Клик по стрелке вложенного подменю
$('.submenu-arrow').click(function(e) {
e.stopPropagation(); // Останавливаем всплытие, чтобы не затронуть другие обработчики
const $parent = $(this).closest('.has-sub-submenu'); // Родительский элемент
const $subExpandable = $parent.find('.sub-submenu-expandable'); // Вложенное меню
if ($subExpandable.is(':visible')) {
// Если вложенное меню видно, скрываем его
$subExpandable.slideUp(); // Анимация скрытия
$parent.removeClass('mobil_active'); // Убираем активный класс
} else {
// Скрываем все вложенные меню
$('.sub-submenu-expandable').slideUp();
$('.has-sub-submenu').removeClass('mobil_active');
// Показываем текущее вложенное меню
$subExpandable.slideDown(); // Анимация показа
$parent.addClass('mobil_active'); // Добавляем активный класс
}
});
// Закрытие меню при клике вне его
$(document).click(function() {
$('.has-submenu').removeClass('mobil_active'); // Сбрасываем активное состояние
$('.header-submenu, .sub-submenu-expandable').slideUp(); // Скрываем все меню
});
// Остановка всплытия при клике внутри меню
$('.header-submenu, .sub-submenu-expandable').click(function(e) {
e.stopPropagation();
});
});* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
*,
* :after,
* :before {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
body {
width: 621px;
}
@media (min-width: 620px) {
.has-submenu {
display: flex;
flex-direction: column;
margin-left: 20px;
}
.links {
color: black;
text-decoration: none;
}
.header-bottom-links-row>li.has-submenu>.ttl::after {
content: "";
width: 10px;
height: 17px;
background: url(mob-menu-arrow.svg) 0 0 no-repeat;
position: absolute;
right: 20px;
margin-top: -16px;
}
.ttl {
margin-bottom: 10px;
}
.ttl>a {
text-decoration: none;
}
.submenu-list {
list-style-type: none;
}
.mobil_active {}
li.mobil_active>.ttl:after {
background-image: url(mob-menu-back.svg) !important;
left: 0 !important;
right: auto !important;
}
ul.submenu-list>li.has-sub-submenu>.ttl:after {
content: "";
width: 10px;
height: 17px;
background: url(mob-menu-arrow.svg) 0 0 no-repeat;
position: absolute;
right: 20px;
margin-top: 0;
}
.to-left {
display: none;
}
.header-submenu {
display: none;
}
.to-right {
display: none;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<ul class="header-bottom-links-row">
<!-- Пункт меню 1 -->
<li class="has-submenu" data-menu-id="menu1">
<div class="ttl">
<a href="#" class="border_bottom">О Мгике</a>
<div class="dropdown_arrow"></div>
</div>
<div class="header-submenu">
<ul class="submenu-list">
<li><a href="#">Приветствие ректора</a></li>
<li><a href="#">История МГИКа</a></li>
<li><a href="#">Структура МГИКа</a></li>
<li><a href="#">Ученый совет</a></li>
<!-- Подпункт с вложенным меню -->
<li class="has-sub-submenu">
<div class="ttl">
<a href="#">Сведения об организации</a>
<div class="submenu-arrow"></div>
</div>
<div class="sub-submenu-expandable">
<ul class="sub-submenu">
<li><a href="#">Основные сведения</a></li>
<li><a href="#">Документы</a></li>
<li><a href="#">Образование</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<!-- Пункт меню 2 -->
<li class="has-submenu" data-menu-id="menu2">
<div class="ttl">
<a href="#" class="border_bottom">Оплата</a>
<div class="dropdown_arrow"></div>
</div>
<div class="header-submenu">
<ul class="submenu-list">
<li><a href="#">ПАО БАНК "ФК Открытие"</a></li>
</ul>
</div>
</li>
<!-- Пункт меню 3 -->
<li class="has-submenu" data-menu-id="menu3">
<div class="ttl">
<a href="#" class="border_bottom">Наука</a>
<div class="dropdown_arrow"></div>
</div>
<div class="header-submenu">
<ul class="submenu-list">
<li><a href="#">Государственная научная аттестация</a></li>
<li><a href="#">Журналы</a></li>
<li><a href="#">Научные мероприятия</a></li>
</ul>
</div>
</li>
<!-- Пункт меню 4 -->
<li class="has-submenu" data-menu-id="menu4">
<div class="ttl">
<a href="#" class="border_bottom">Образование</a>
<div class="dropdown_arrow"></div>
</div>
<div class="header-submenu">
<ul class="submenu-list">
<li><a href="#">Факультеты</a></li>
<li><a href="#">Кафедры</a></li>
<li><a href="#">Магистратура</a></li>
</ul>
</div>
</li>
</ul>