Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.07.2016, 17:14
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 429

Аккордеон не получается
Я не знаю, что делать.

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

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

http://plnkr.co/edit/tfZdrlFUGhSdFKzRfTNG?p=preview
Ответить с цитированием
  #2 (permalink)  
Старый 24.07.2016, 17:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Сообщение от DivMan
найти его контейнер и в этом контейнере найти submenu
что значит найти?
Ответить с цитированием
  #3 (permalink)  
Старый 24.07.2016, 17:26
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 429

найти контейнер у class="item" и в этом контейнере найти submenu
Ответить с цитированием
  #4 (permalink)  
Старый 24.07.2016, 17:31
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 429

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

http://plnkr.co/edit/NYDHCCCaAPz39WAleF1J?p=preview
Ответить с цитированием
  #5 (permalink)  
Старый 24.07.2016, 17:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Сообщение от DivMan
что бы они автоматически закрывались.
в каком случае?
Ответить с цитированием
  #6 (permalink)  
Старый 24.07.2016, 17:55
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 429

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

DivMan,
250 открывашек на форуме обязательно нужна своя? сохранить открытый элемент в переменную -- в клике проверить если в переменной что-то и это что-то != новому то переменная classList.add(none)
Ответить с цитированием
  #8 (permalink)  
Старый 24.07.2016, 19:09
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 429

не получается http://plnkr.co/edit/D6k0EPdRkGPlEYyFROO0?p=preview
Ответить с цитированием
  #9 (permalink)  
Старый 24.07.2016, 21:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Открывашка 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>

Последний раз редактировалось рони, 24.07.2016 в 21:31.
Ответить с цитированием
  #10 (permalink)  
Старый 24.07.2016, 21:27
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 429

сложно
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не получается адаптировать код 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