Показать сообщение отдельно
  #15 (permalink)  
Старый 28.07.2016, 18:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

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>
Ответить с цитированием