Поочередное раскрытие/закрытие меню на jQuery

294

27 мая 2017, 18:09

Здравствуйте! Встала необходимость воспользоваться jQuery для верстки мобильного меню. Я в нем, мягко говоря, не очень разбираюсь, поэтому код для сворачивания/разворачивания меню честно нашла в интернете. И все отлично, все работает, но проблема в том, что при открытии одного окна меню, второе окно меню не закрывается.

Пробовала это исправить своими силами, экспериментировала с .slideDown() .slideUp(), но максимум чего я достигала, что меню сворачивалось в нужный момент, но после этого больше не раскрывалось. Не могу понять, что необходимо изменить в скрипте, чтобы это дало нужный эффект.

Сейчас скрипт выглядит так:

$(".menu-mobile").click(function() {
    $(".menu").toggleClass("menu_state_open");
});
$(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");
});
$(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>

Answer 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>

Answer 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>

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

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Bootstrap разная позиция в разных размерах

Что то не приходит ничего полезного в голову, есть два вида, условно - десктоп и моб версии, необходимо в моб версии перенести красную скнопку...

282

CSS

Как узнать корректный event.layerX div'а с css анимацией scroll?

Добрый день!

295

CSS

Кнопка перключения стилей

Подскажите как на JavaScript сделать скрипт чтоб он менял стиль страницы с ночного на дневнойС HTML и CSS я справился, а вот кнопку переключения стилей...

690

CSS

Вопрос по CSS lightbox2

Как сделать в lightbox2 крестик закрытия сверху ? http://lokeshdhakarcom/projects/lightbox2/

299