Здравствуйте! Встала необходимость воспользоваться jQuery для верстки мобильного меню. Я в нем, мягко говоря, не очень разбираюсь, поэтому код для сворачивания/разворачивания меню честно нашла в интернете. И все отлично, все работает, но проблема в том, что при открытии одного окна меню, второе окно меню не закрывается.
Пробовала это исправить своими силами, экспериментировала с .slideDown() .slideUp(), но максимум чего я достигала, что меню сворачивалось в нужный момент, но после этого больше не раскрывалось. Не могу понять, что необходимо изменить в скрипте, чтобы это дало нужный эффект.
Сейчас скрипт выглядит так. Он сворачивает/разворачивает окна как надо, но выглядит это... так себе:
$(".menu-mobile").click(function() {
$(".menu").toggleClass("menu_state_open");
$(".menu__city").slideUp();
$(".menu__links").slideDown();
});
$(document).mouseup(function(e) {
var $target = $(e.target);
if ($target.closest(".menu__links").length == 0 &&
$target.closest(".menu-mobile").length == 0) {
$(".menu__links").removeClass("menu-mobile");
}
});
$(".active").click(function() {
$(".nav_left").toggleClass("nav_left_state_open");
$(".menu__links").slideUp();
$(".menu__city").slideDown();
});
$(document).mouseup(function(e) {
var $target = $(e.target);
if ($target.closest(".menu__city").length == 0 &&
$target.closest(".active").length == 0) {
$(".menu__city").removeClass("active");
}
});
HTML
<div class="menu">
<div class="menu-mobile">Меню 1</div>
<div class="menu__links">
<a class="menu__links-item" href="">Раздел</a>
<a class="menu__links-item activ" href="">Раздел</a>
<a class="menu__links-item" href="">Раздел</a>
<a class="menu__links-item" href="">Раздел</a>
<a class="menu__links-item" href="">Раздел</a>
</div>
</div>
<div style="clear: both"></div>
<div class="nav_left">
<div class="active">Меню 2</div>
<div class="menu__city">
<a class="menu__city-item" href="">Раздел</a>
<a class="menu__city-item" href="">Раздел</a>
<a class="menu__city-item" href="">Раздел</a>
<a class="menu__city-item" href="">Раздел</a>
<a class="menu__city-item" href="">Раздел</a>
</div>
</div>