13Foch,
на всякий случай, оба варианта и ваш и мой не рассчитаны на большее вложение. |
Цитата:
|
Цитата:
|
Цитата:
|
13Foch,
примерно так, убираем класс на соседних одного уровня.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<style>
.menu__item {
position: relative;
display: inline-block;
margin: 0 10px;
cursor: pointer;
}
.menu__item.menu__item--active {
background-color: silver;
}
.menu__menu-lvl2 {
position: absolute;
display: none;
top: 100%;
left: 0;
box-shadow: 1px 1px 30px 1px silver;
}
.menu__item.menu__item--active>.menu__menu-lvl2 {
display: block;
color: red;
background-color: rgba(255, 255, 255, 1);
}
ul{
padding: 0;
}
li{
list-style: none;
}
</style>
<ul class="menu">
<li class="menu__item">
<div class="menu__name">item1</div>
<ul class="menu__menu-lvl2">
<li class="menu__item"><div class="menu__name">item1.1</div>
<ul class="menu__menu-lvl2">
<li>item1__lvl2__item1</li>
<li>item1__lvl2__item2</li>
<li>item1__lvl2__item3</li>
</ul></li>
<li class="menu__item"><div class="menu__name">item1.2</div>
<ul class="menu__menu-lvl2">
<li>item1__lvl2__item1</li>
<li>item1__lvl2__item2</li>
<li>item1__lvl2__item3</li>
</ul></li>
<li class="menu__item"><div class="menu__name">item1.3</div>
<ul class="menu__menu-lvl2">
<li>item1__lvl2__item1</li>
<li>item1__lvl2__item2</li>
<li>item1__lvl2__item3</li>
</ul></li>
</ul>
</li>
<li class="menu__item">
<div class="menu__name">item2</div>
<ul class="menu__menu-lvl2">
<li>item2__lvl2__item1</li>
<li>item2__lvl2__item2</li>
<li>item2__lvl2__item3</li>
</ul>
</li>
<li class="menu__item">
<div class="menu__name">item3</div>
<ul class="menu__menu-lvl2">
<li>item3__lvl2__item1</li>
<li>item3__lvl2__item2</li>
<li>item3__lvl2__item3</li>
</ul>
</li>
<li class="menu__item">
<div class="menu__name">item4</div>
</li>
</ul>
<script>
document.querySelector(".menu").addEventListener("click", function(event) {
let target = event.target;
if (target = target.closest(".menu__name")) {
event.preventDefault();
let parent = target.parentNode;
let children = parent.parentNode.children;
[...children].forEach(el => el.classList[ el === parent ? "toggle" : "remove"]("menu__item--active"))
}
});
</script>
</body>
</html>
|
Цитата:
|
а почему мало используете this, смотрю мало его люди используют а мне он очень нравиться, я почти везде где только можно суну this )
|
Цитата:
На светофоре стоит Ламборджини... Рядом останавливается Логан. Водила Логана делает знаки водиле Ламборджини, де есть вопрос к нему... Водила Ламборджини опускает стекло: - Что хотел? - Хотел узнать как тачка? - Нормальная. - Не ломается? - Нет. А в чем проблема? - Да вот смотрю не особо ее народ покупает... |
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 19:24. |