Есть основное меню и выпадающее меню, я сделала чтобы оно появлялось при наведении и при клике(при добавлении класса). Но есть проблема в планшетной версии, меню еще не скрывается и надо чтобы при клике появлялось выпадающее меню, а при обратном клике скрывалось, ему мешает hover и поэтому при обратном клике на него же оно не скрывается, а скрывается только тогда когда я нажму на другую ссылку или просто в другом месте экрана.
Я нашла другое решение - навесила новый класс и ему сделала hover, при определенном разрешении экрана этот класс удаляется и не мешает клику, но мой код не работает.
if($(window).width() > 992) {
$('.nav-menu__item').addClass('.nav-menu__item--hover');
} else {
$('.nav-menu__item').removeClass('.nav-menu__item--hover');
}
$(window).resize(function() {
if($(window).width() > 992) {
$('.nav-menu__item').addClass('.nav-menu__item--hover');
} else {
$('.nav-menu__item').removeClass('.nav-menu__item--hover');
}
});
$('.nav-menu__item').on('click', function() {
$(this).toggleClass('show-dropdown');
});
.dropdown-menu {
position: absolute;
z-index: 5;
padding-top: 22px;
width: 242px;
left: 0;
max-height:0;
overflow:hidden;
transform:perspective(400) rotate3d(1,0,0,-90deg);
transform-origin:50% 0;
transition:350ms;
box-shadow: 2px 10px 15px rgba(0, 0, 0, 0.15);
border-radius: 0px 0px 25px 25px;
}
.nav-menu {
display: flex;
&__item {
margin: 0 15px;
position: relative;
&--hover:hover, &.show-dropdown {
.dropdown-menu {
max-height:1000px;
transform:perspective(400) rotate3d(0,0,0,0);
}
}
}
.nav-menu__item
a.nav-menu__link(href="#") Магазины
.dropdown-menu
.dropdown-menu__list
.dropdown-menu__item
+icon('arrow-right', 'dropdown-menu__icon')
a.dropdown-menu__link(href="#") Киев «MatroLuxe», ул. Беломорская, 2
.dropdown-menu__item
+icon('arrow-right', 'dropdown-menu__icon')
a.dropdown-menu__link(href="#") Днепр «MatroLuxe» пр. Александра Поля, 97а
.dropdown-menu__item
+icon('arrow-right', 'dropdown-menu__icon')
a.dropdown-menu__link(href="#") Днепр «MatroLuxe» пр. Александра Поля, 96
.dropdown-menu__item
+icon('arrow-right', 'dropdown-menu__icon')
a.dropdown-menu__link(href="#") Днепр «MatroLuxe» пр. Александра Поля, 96