Javascript-форум - Аккордеон не получается

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Аккордеон не получается (https://javascript.ru/forum/events/64176-akkordeon-ne-poluchaetsya.html)

Аккордеон не получается

Я не знаю, что делать.

Для начала мне надо кликнуть на пункт, найти его контейнер и в этом контейнере найти submenu и вывести его содержимое в консоль.

2 шага я сделал, а как найти submenu, я вообще не понимаю

http://plnkr.co/edit/tfZdrlFUGhSdFKzRfTNG?p=preview

Цитата:

Сообщение от DivMan

найти его контейнер и в этом контейнере найти submenu

что значит найти?

найти контейнер у class="item" и в этом контейнере найти submenu

Вот так получилось
Теперь надо научится, что бы они автоматически закрывались.
Можете мне подсказать в какую сторону думать? Только не делайте готовое решение.

http://plnkr.co/edit/NYDHCCCaAPz39WAleF1J?p=preview

Цитата:

Сообщение от DivMan

что бы они автоматически закрывались.

в каком случае?

если открыть пункт, то он открывается, а если открыть другой пункт, то предыдущий сам закрывался.

DivMan,
250 открывашек на форуме обязательно нужна своя? сохранить открытый элемент в переменную -- в клике проверить если в переменной что-то и это что-то != новому то переменная classList.add(none)

Открывашка 259

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 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>
    <li class="item">
      <div class="item_title">События</div>
      <ul class="submenu none">
          <li>Лексическая структура</li>
          <li>Типы данных, значения и переменные</li>
          <li>Выражения и операторы инструкции</li>

      </ul>
    </li>
  </ul>
  <script>
window.addEventListener("DOMContentLoaded", function() {
    var items = document.querySelectorAll(".item"),
        temp;
    [].forEach.call(items, function(item) {
        var submenu = item.querySelector(".submenu");
        var itemTitle = item.querySelector(".item_title");
        itemTitle.addEventListener("click", function(e) {
            temp && temp != submenu && temp.classList.add("none");
            submenu.classList.toggle("none");
            temp = submenu
        })
    })
});
  </script>

</body>

</html>

Цитата:

Сообщение от DivMan

сложно

буковку s добавил для списка
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>