Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 10.08.2018, 17:42
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 379

А так работает???

<div class="dssection">
<ul>
<li><a href="#">Каталог</a>
<ul>
<li><a href="/index/0-19">БРС</a>
<ul>
<li><a href="/index/0-20">Камлоки</a>
<ul>
<li><a href="/publ/14-1-0-2">Алюминий</a></li>
<li><a href="/index/0-39">Нержа</a></li>
<li><a href="#">Полипропилен</a></li>
<li><a href="#">Кольца</a></li>
<li><a href="#">Размеры</a></li>
<li><a href="#">Адаптеры</a>
<ul>
<li><a href="#">Под приварку</a></li>
<li><a href="#">Фланцевые</a></li>
<li><a href="#">Подуровень 3</a></li>
<li><a href="#">Подуровень 4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Буровые</a></li>
<li><a href="#">Подуровень 3</a></li>
<li><a href="#">Подуровень 4</a></li>
</ul>
</li>
<li><a href="#">Рукава</a>
<ul>
<li><a href="#">Рукава 1</a></li>
<li><a href="#">Рукава 2</a></li>
<li><a href="#">Подуровень 3</a></li>
<li><a href="#">Подуровень 4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

<style>
	.dssection a:not(:only-child)::after {
		content: url(http://gtrad.ucoz.net/arvverh.gif);
		padding: 0 .4em;
		vertical-align: .1em;
	}
	
	.dssection a:not(:only-child).expanded::after {
		content: url(http://gtrad.ucoz.net/arvniz.gif)
	}
</style>
<script>
	
	Array.from(document.querySelectorAll(".dssection a + ul")).forEach(function(element) {
		element.hidden = true;
	});

	document.addEventListener("click", function(event) {
		if(event.target.matches(".dssection a") && event.target.nextElementSibling.tagName === "UL") {
			event.preventDefault();
			event.target.nextElementSibling.hidden = !event.target.nextElementSibling.hidden;
			event.target.classList.toggle("expanded", !event.target.nextElementSibling.hidden);
		}
	});
	
</script>


UPD
Вместе со стилями из 1-го поста
https://jsfiddle.net/b9Luk1td/

И удалите на сайте в файле my.css на 408 строке display: none;

Последний раз редактировалось Malleys, 10.08.2018 в 18:16.
Ответить с цитированием
  #22 (permalink)  
Старый 13.08.2018, 11:12
Новичок на форуме
Отправить личное сообщение для Шибалов Посмотреть профиль Найти все сообщения от Шибалов
 
Регистрация: 20.07.2018
Сообщений: 4

"Удалил на сайте в файле my.css на 408 строке display: none;" - меню загружается полностью открытым. Не работает. Вернул как было.
Кода намного меньше. Жмешь на ссылку в подкатегории, страница открывается, а меню закрывается.

Вот здесь нашел меню с 4 уровнями вложенности. Вроде работает.

Последний раз редактировалось Шибалов, 17.08.2018 в 13:36.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Замена стилей класса Павел Турченко Элементы интерфейса 9 30.10.2015 15:24
Бесконечноуровневое меню на CSS ruslan_mart Ваши сайты и скрипты 5 12.01.2015 20:59
помогите разобраться с мега меню tyshka jQuery 4 24.10.2014 21:30
Помогите доработать меню Fox Mulder Элементы интерфейса 3 01.08.2013 12:34
Помогите с анимацией выпадающего меню strengerst Элементы интерфейса 13 31.07.2013 12:27