Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.06.2021, 17:28
Интересующийся
Отправить личное сообщение для 13Foch Посмотреть профиль Найти все сообщения от 13Foch
 
Регистрация: 08.06.2021
Сообщений: 21

подменю при клике на элемент меню, насколько правильно написано
<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, 08.06.2021 в 17:30.
Ответить с цитированием
  #2 (permalink)  
Старый 08.06.2021, 18:55
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от 13Foch
насколько правильно написан js и насколько можно его сократить
Например можно делать вообще один клик на все меню разом.
Там все и решать.
А у тебя довольно много циклов.
Ответить с цитированием
  #3 (permalink)  
Старый 08.06.2021, 19:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #4 (permalink)  
Старый 08.06.2021, 20:13
Интересующийся
Отправить личное сообщение для 13Foch Посмотреть профиль Найти все сообщения от 13Foch
 
Регистрация: 08.06.2021
Сообщений: 21

Сообщение от ksa Посмотреть сообщение
Например можно делать вообще один клик на все меню разом.
Там все и решать.
А у тебя довольно много циклов.
второй цикл для того чтоб все остальные закрылись и проверка if для того чтобы при клике на тот же пункт подменю закрылось
Ответить с цитированием
  #5 (permalink)  
Старый 08.06.2021, 20:19
Интересующийся
Отправить личное сообщение для 13Foch Посмотреть профиль Найти все сообщения от 13Foch
 
Регистрация: 08.06.2021
Сообщений: 21

Сообщение от рони Посмотреть сообщение
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>
уже короче и идея немного другая спасибо
Ответить с цитированием
  #6 (permalink)  
Старый 08.06.2021, 20:20
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от 13Foch
для того чтоб все остальные закрылись
Если я правильно понял, "открытым" у тебя может быть только один.
Т.ч. и закрывать нужно один. Какой тут цикл?
Ответить с цитированием
  #7 (permalink)  
Старый 08.06.2021, 20:23
Интересующийся
Отправить личное сообщение для 13Foch Посмотреть профиль Найти все сообщения от 13Foch
 
Регистрация: 08.06.2021
Сообщений: 21

Сообщение от ksa Посмотреть сообщение
Если я правильно понял, "открытым" у тебя может быть только один.
Т.ч. и закрывать нужно один. Какой тут цикл?
да и закрываться должен он если снова по нему клацнуть
Ответить с цитированием
  #8 (permalink)  
Старый 08.06.2021, 20:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

13Foch,
не копируйте пост целиком без необходимости, это засоряет тему, есть цитирование.
Ответить с цитированием
  #9 (permalink)  
Старый 08.06.2021, 20:25
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от 13Foch
да и закрываться должен он если снова по нему клацнуть
Значит нет никаких циклов совсем...

Что и показал рони в своем примере.
Ответить с цитированием
  #10 (permalink)  
Старый 08.06.2021, 20:26
Интересующийся
Отправить личное сообщение для 13Foch Посмотреть профиль Найти все сообщения от 13Foch
 
Регистрация: 08.06.2021
Сообщений: 21

ок извиняюсь
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Убрать боковое меню при клике не по меню Oleg0 Элементы интерфейса 2 21.08.2017 20:07
Замена стилей класса Павел Турченко Элементы интерфейса 9 30.10.2015 15:24
Несколько пунктов меню, отображение содержимого при клике chelfenix jQuery 3 10.04.2015 16:52
Выделение при клике на элемент haacki jQuery 2 16.03.2014 14:56
Dropdown, выпадающее меню при клике moslem jQuery 2 22.07.2013 17:20