Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 24.07.2016, 22:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,055

Сообщение от DivMan
сложно
буковку s добавил для списка
var items = document.querySelectorAll(".item"), чтоб было отличие в строке 65
Ответить с цитированием
  #12 (permalink)  
Старый 27.07.2016, 23:36
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 429

Почему автоматическое закрытие происходит только 1 раз?
http://plnkr.co/edit/b5LbiFyk3QtwFBvf03zm?p=preview
Ответить с цитированием
  #13 (permalink)  
Старый 28.07.2016, 00:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,055

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>
Ответить с цитированием
  #14 (permalink)  
Старый 28.07.2016, 14:37
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 429

Я хочу что бы при клике, у главного пункта менялся цвет, но почему меняется у всех, если я сделал по тому же принципу? http://plnkr.co/edit/OQxzD9Y4NVmQtihFpNir?p=preview
Ответить с цитированием
  #15 (permalink)  
Старый 28.07.2016, 19:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,055

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



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не получается адаптировать код pricebody Общие вопросы Javascript 2 18.03.2016 20:03
Связать ползунковый слайдер и аккордеон... All_ex74 Элементы интерфейса 1 31.05.2013 13:20
Не получается прикрутить wysiwig Bloiv AJAX и COMET 1 22.06.2012 20:52
dataTables + jeditable не получается сделать поля редактируемыми alekslkta Элементы интерфейса 0 02.05.2011 16:17
dataTables + jeditable не получается сделать поля редактируемыми alekslkta jQuery 0 01.05.2011 23:53