1

Здравствуйте! Встала необходимость воспользоваться 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>
2
  • 1
    Можно увидеть кусок html кода? после этого предложу достойный вариант jquery. 26 мая 2017 в 14:11
  • @RazmikGalstyan Здравствуйте, добавила html код
    – Alla
    26 мая 2017 в 15:29

2 ответа 2

2

Доброе утро, предлагаю рабочий вариант кода на jqeury. Он будет работать с неограниченным количеством пунктов меню с вашим каркасом.

$(document).ready(function(){
  $('.menu-mobile').on('click',function(){
    if($(this).next().hasClass('active')){
      $(this).next().removeClass('active');
    }
    else{
      $('.menu_item').removeClass('active');
      $(this).next().addClass('active');
    }
  });
});
.menu_item{
	display: none;
}

.active{
	display: inline-block;
}

.menu-item-child{
	color: #333333;
	font-family: Arial;
	font-size: 14px;
	line-height: 30px;
	padding: 0 10px;
	text-transform: uppercase;
	text-decoration: none;
}
.menu-item-child:hover {
	text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<div id="menu">
		<div class="menu-mobile">Меню 1</div>
		<div class="menu_item">
			<a class="menu__links-item" href="">Раздел</a>
			<a class="menu__links-item" href="">Раздел</a>
		</div>
		<div class="menu-mobile">Меню 2</div>
		<div class="menu_item">
			<a class="menu-item-child" href="">Раздел</a>
			<a class="menu-item-child" href="">Раздел</a>
			<a class="menu-item-child" href="">Раздел</a>
			<a class="menu-item-child" href="">Раздел</a>
			<a class="menu-item-child" href="">Раздел</a>
		</div>
		<div class="menu-mobile">Меню 3</div>
		<div class="menu_item">
			<a class="menu-item-child" href="">Раздел</a>
			<a class="menu-item-child" href="">Раздел</a>
			<a class="menu-item-child" href="">Раздел</a>
		</div>
		<div class="menu-mobile">Меню 4</div>
		<div class="menu_item">
			<a class="menu-item-child" href="">Раздел</a>
			<a class="menu-item-child" href="">Раздел</a>
			<a class="menu-item-child" href="">Раздел</a>
		</div>
	</div>

Вам нужно будет просто поставить стили которые вам нужны для красивого вывода меню.

1
  • я попробовала ваши варианты приложить к своему проекту, но получилось не очень. Кто в лес, кто по дрова. В своем вопросе я дописала как сама изменила скрипт, чтобы он работал, как описывала. Он конечно работает, но выглядит так себе эта работа. Спасибо, что откликнулись. Буду пробовать дальше
    – Alla
    28 мая 2017 в 13:06
1

Предлагаю вариант на jquery, вроде достойно) Если нужно чтобы меню работало по наведению просто измените в скрипте click на hover

$(document).ready(function() {
  $("#menu-mobile").click(function() {
    $('.menu__city').removeClass('menu_state_open');
    $('.menu__links').addClass("menu_state_open");
  });
  $("#menu-city").click(function() {
    $('.menu__links').removeClass('menu_state_open');
    $('.menu__city').addClass("menu_state_open");
  });
}).mouseup(function(e) {
  var div = $("#menu");
  if (!div.is(e.target) && div.has(e.target).length === 0) {
    $('.menu_item').removeClass('menu_state_open');
  }
});
.menu__links,
.menu__city {
  display: none;
}

.menu_state_open {
  display: inline-block;
}

.menu__links-item,
.menu__city-item {
  color: #333333;
  font-family: Arial;
  font-size: 14px;
  line-height: 30px;
  padding: 0 10px;
  text-transform: uppercase;
  text-decoration: none;
}

.menu__links-item:hover,
.menu__city-item:hover {
  text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
  <div id="menu-mobile">Меню 1</div>
  <div class="menu__links menu_item">
    <a class="menu__links-item" href="">Раздел</a>
    <a class="menu__links-item" 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 id="menu-city">Меню 2</div>
  <div class="menu__city menu_item">
    <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>

4
  • Вариант нормальный но недостаток в том что если сделать второй клик на открытый меню то он уже не закрывается, то есть у нас один пункт меню всегда останется открытой. 27 мая 2017 в 5:30
  • Нет смысла дописывать эту функцию, если внутри меню ссылки - по переходу по линку страница перезагружается и меню загружается в закрытом виде. А для удобности я сделал функцию скрытия всех подпунктов меню при клике вне области самого меню, это вполне должно хватить для нормального функционирования 27 мая 2017 в 9:25
  • Человек откуда должен знать что если кликает не на меню а куда небуть то оно закроеться? 28 мая 2017 в 13:08
  • Случайно обнаружит эту фичу сам 28 мая 2017 в 18:48

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.