Форум

рони · #11 (**permalink**) 24.07.2016, 21:34

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

сложно

буковку s добавил для списка
var items = document.querySelectorAll(".item"), чтоб было отличие в строке 65

DivMan · #12 (**permalink**) 27.07.2016, 22:36

Почему автоматическое закрытие происходит только 1 раз?
http://plnkr.co/edit/b5LbiFyk3QtwFBvf03zm?p=preview

рони · #13 (**permalink**) 27.07.2016, 23:01

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>

DivMan · #14 (**permalink**) 28.07.2016, 13:37

Я хочу что бы при клике, у главного пункта менялся цвет, но почему меняется у всех, если я сделал по тому же принципу? http://plnkr.co/edit/OQxzD9Y4NVmQtihFpNir?p=preview

рони · #15 (**permalink**) 28.07.2016, 18:07

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>

Форум

Справочник

Discord чат

Курсы javascript