Цитата:
var items = document.querySelectorAll(".item"), чтоб было отличие в строке 65 |
Почему автоматическое закрытие происходит только 1 раз?
http://plnkr.co/edit/b5LbiFyk3QtwFBvf03zm?p=preview |
DivMan,
:-?
<!DOCTYPE HTML>
<html>
<head>
<style>
.none{display: none;}
</style>
<meta charset="utf-8">
</head>
<body>
<ul class="mainMenu">
<li class="item">
<div class="item_title" >Основы языка и как на нём говорить правильно</div>
<ul class="submenu">
<li>Лексическая структура</li>
<li>Типы данных, значения и переменные</li>
<li>Выражения и операторы инструкции</li>
</ul>
</li>
<li class="item">
<div class="item_title" >Функции</div>
<ul class="submenu none">
<li>Лексическая структура</li>
<li>Типы данных, значения и переменные</li>
<li>Выражения и операторы инструкции</li>
</ul>
</li>
<li class="item">
<div class="item_title" >Обработка ошибок и отладка</div>
<ul class="submenu none">
<li>Лексическая структура</li>
<li>Типы данных, значения и переменные</li>
<li>Выражения и операторы инструкции</li>
</ul>
</li>
<li class="item">
<div class="item_title">Объекты и массивы</div>
<ul class="submenu none">
<li>Лексическая структура</li>
<li>Типы данных, значения и переменные</li>
<li>Выражения и операторы инструкции</li>
</ul>
</li>
<li class="item">
<div class="item_title">События</div>
<ul class="submenu none">
<li>Лексическая структура</li>
<li>Типы данных, значения и переменные</li>
<li>Выражения и операторы инструкции</li>
</ul>
</li>
</ul>
<script>
var mainMenu = document.querySelector(".mainMenu"),
itemChild = mainMenu.querySelectorAll(".submenu");
mainMenu.addEventListener("click", function(e) {
var item = e.target.closest(".item");
var submenu = item.querySelector(".submenu");
var itemTitle = item.querySelector(".item_title");
if (e.target == itemTitle) {
submenu.classList.toggle("none");
for (var i = 0; i < itemChild.length; i++)
if (itemChild[i] != submenu) itemChild[i].classList.add("none")
}
});
</script>
</body>
</html>
|
Я хочу что бы при клике, у главного пункта менялся цвет, но почему меняется у всех, если я сделал по тому же принципу? http://plnkr.co/edit/OQxzD9Y4NVmQtihFpNir?p=preview
|
DivMan,
<!DOCTYPE HTML>
<html>
<head>
<style>
.none{display: none;}
ul{
list-style: none;
padding: 0;
}
.submenu{
background: #e7e7e7;
}
.item_title{
background: #696666;
cursor: pointer;
}
.active{background: #ff8663;}
</style>
<meta charset="utf-8">
</head>
<body>
<ul class="mainMenu">
<li class="item">
<div class="item_title active" >Основы языка и как на нём говорить правильно</div>
<ul class="submenu">
<li>Лексическая структура</li>
<li>Типы данных, значения и переменные</li>
<li>Выражения и операторы инструкции</li>
</ul>
</li>
<li class="item">
<div class="item_title" >Функции</div>
<ul class="submenu none">
<li>Лексическая структура</li>
<li>Типы данных, значения и переменные</li>
<li>Выражения и операторы инструкции</li>
</ul>
</li>
<li class="item">
<div class="item_title" >Обработка ошибок и отладка</div>
<ul class="submenu none">
<li>Лексическая структура</li>
<li>Типы данных, значения и переменные</li>
<li>Выражения и операторы инструкции</li>
</ul>
</li>
<li class="item">
<div class="item_title">Объекты и массивы</div>
<ul class="submenu none">
<li>Лексическая структура</li>
<li>Типы данных, значения и переменные</li>
<li>Выражения и операторы инструкции</li>
</ul>
</li>
<li class="item">
<div class="item_title">События</div>
<ul class="submenu none">
<li>Лексическая структура</li>
<li>Типы данных, значения и переменные</li>
<li>Выражения и операторы инструкции</li>
</ul>
</li>
</ul>
<script>
var mainMenu = document.querySelector(".mainMenu"),
itemChild = mainMenu.querySelectorAll(".submenu");
mainMenu.addEventListener("click", function(e) {
var item = e.target.closest(".item");
var submenu = item.querySelector(".submenu");
var itemTitle = item.querySelector(".item_title");
if (e.target == itemTitle) {
submenu.classList.toggle("none");
itemTitle.classList.toggle("active");
for (var i = 0; i < itemChild.length; i++)
if (itemChild[i] != submenu) {
itemChild[i].classList.add("none");
itemChild[i].previousElementSibling.classList.remove("active");
}
}
});
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 05:48. |