|
подменю при клике на элемент меню, насколько правильно написано
<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__menu-lvl2.menu__menu-lvl2--active {
display: block;
color: red;
}
</style>
<ul class="menu">
<li class="menu__item">
<div class="menu__name">item1</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">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>
let menuItems = document.querySelectorAll('.menu__item');
for (let menuItem of menuItems) {
menuItem.onclick = function (evt) {
evt.preventDefault();
for (let menuItemRemove of menuItems) {
if (menuItemRemove !== this) {
menuItemRemove.classList.remove('menu__item--active');
let menuItemRemoveExists = menuItemRemove.querySelector('.menu__menu-lvl2');
if (menuItemRemoveExists) {
menuItemRemoveExists.classList.remove('menu__menu-lvl2--active');
}
}
}
this.classList.toggle('menu__item--active');
// console.log(this.parentElement.parentElement);
if (this.querySelector('.menu__menu-lvl2')) {
this.querySelector('.menu__menu-lvl2').classList.toggle('menu__menu-lvl2--active');
}
}
}
Подскажите насколько правильно написан js и насколько можно его сократить. Спасибо |
Цитата:
Там все и решать. А у тебя довольно много циклов. |
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;
}
</style>
<ul class="menu">
<li class="menu__item">
<div class="menu__name">item1</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">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>
let current;
document.querySelector(".menu").addEventListener("click", function(event) {
let target = event.target;
if (target = target.closest(".menu__name")) {
event.preventDefault();
let parent = target.parentNode;
if (current && current !== parent) current.classList.remove("menu__item--active");
current = parent;
current.classList.toggle("menu__item--active");
}
});
</script>
</body>
</html>
|
Цитата:
|
Цитата:
|
Цитата:
Т.ч. и закрывать нужно один. Какой тут цикл? |
Цитата:
|
13Foch,
не копируйте пост целиком без необходимости, это засоряет тему, есть цитирование. |
Цитата:
Что и показал рони в своем примере. |
ок извиняюсь
|
| Часовой пояс GMT +3, время: 02:37. |
|