Cal_Lightman
@Cal_Lightman

Как реализовать открытие и закрытие элементов в подменю 2-го и 3-го уровня по клику?

Делаю навигационное меню, в котором есть Каталог. в нём есть подменю 2-го и 3-го уровня.

Через js добавляю:
1) класс .parent к родителю 2-го уровня;
2) и стрелочку для раскрытия подменю <span></span> , к родителям подменю 2-го и 3-го уровня.

$(function(){
	$('.menu_list ul li ul li ul').parent().addClass('parent');
	$('.menu_list ul li ul li ul,.menu_list ul li ul').parent().append('<span></span>');
});


<div class="menu_list">
				<ul>
					<li><a href="">Главная</a></li>
					<li class="catalog_dropdown"><a href="">Каталог</a>

						<ul>
							<li class="parent"><a href="">Товар номер - 1</a>

								<ul>
									<li><a href="">Товар номер - 1.1</a></li>
									<li><a href="">Товар номер - 1.2</a></li>
									<li><a href="">Товар номер - 1.3</a></li>
								</ul>
     <span></span>

							</li>
							<li class="parent"><a href="">Товар номер - 2</a>

								<ul>
									<li><a href="">Товар номер - 2.1</a></li>
									<li><a href="">Товар номер - 2.2</a></li>
									<li><a href="">Товар номер - 2.3</a></li>
								</ul>
 <span></span>

							</li>
							<li><a href="">Товар номер - 3</a></li>
							<li><a href="">Товар номер - 4</a></li>
						</ul>

					</li>
					<li><a href="">Контакты</a></li>
					<li><a href="">О нас</a></li>
				</ul>
			</div>


CSS:

/*Стрелочка вверх и вниз (Каталог всегда сразу открыт, подменю 3-го уровня скрыты)*/
	.catalog_dropdown>span::before{
		top:16px;
		transform:rotate(180deg);
	}
	.parent>span::before{
		top:12px;
	}

	/*Анимация стрелочки по клику*/
	.catalog_dropdown>span.active::before{
		transform:rotate(0deg);
	}
	.parent>span.active::before{
		transform:rotate(180deg);
	}

	/*level-2*/
	.menu_list ul li ul{
		background-color:#e3e8e6;
		visibility:visible;
		position:relative;
		opacity:1;
		transition:.3s;
	}
	.menu_list ul li ul.active{
		background-color:#e3e8e6;
		visibility:hidden;
		position:absolute;
		opacity:0;
		transition:none;
	}
	
	/*level-3*/
	.menu_list ul li ul li ul{
		background-color:#c9d1ce;
		visibility:hidden;
		position:absolute;
		opacity:0;
		transition:none;
	}
	.menu_list ul li ul li ul.active{
		background-color:#c9d1ce;
		visibility:visible;
		position:relative;
		opacity:1;
		transition:.3s;
	}


Сделал только отдельно Каталог, потому что у него нет соседних таких же элементов.
По клику он закрывается и потом при повторном клике открывается.
$(function(){
	$('.catalog_dropdown>span').click(function(){
		$('.catalog_dropdown>span,.menu_list ul li ul').toggleClass('active');
	});
	$('.catalog_dropdown>span.active').click(function(){
		$('.catalog_dropdown>span,.menu_list ul li ul').removeClass('active');
	});
});


60fe62d59c33c895652285.png

Как правильно будет выглядеть скрипт, чтобы при клике по стрелочке открывалось выбранное подменю 3-го уровня. При повторном клике на нем- закрывалось. При открытии других подменю - закрывались все открытые (т.е. последнее открытое) и открывалось выбранное?

И если можно, как совместить готовый скрипт со скриптом Каталога и со скриптом добавления классов Родителей и Стрелочки?
  • Вопрос задан
  • 138 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы