Задать вопрос

Collapse bootstrap 4, как добавить вложенные уровни, т.е. аккордеон в аккордеон?

хочу сделать многоуровневое меню аккордеон

<div id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="heading7">
            <a class="collapsed list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse7" aria-expanded="false" aria-controls="collapse7">Станки <i class="fa fa-angle-down" aria-hidden="true"></i></a>
        </div>
         <div id="collapse7" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading7">
             <a class="list-group-item" href="#">Плиткорезы</a>
             <a class="list-group-item" href="#">Пылесосы</a>
             <div class="panel-heading" role="tab" id="heading9">
                 <a class="collapsed list-group-item" data-toggle="collapse" data-parent="#heading9" href="#collapse9" aria-expanded="false" aria-controls="collapse9">Станки металлообрабатывающие <i class="fa fa-angle-down" aria-hidden="true"></i></a>
             </div>
    	     <div id="collapse9" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading9">
                 <a class="list-group-item" href="#">Ленточные пилы</a>
                 <a class="list-group-item" href="#">Токарные станки</a>
                 <a class="list-group-item" href="#">Токарно-фрезерные станки</a>
                 <a class="list-group-item" href="#">Фрезерные станки</a>
                 <a class="list-group-item" href="#">Сверлильные станки на магнитной подошве</a>
    	     </div>
         </div>
     </div>
</div>

При клике по дочернему (вложенному) пункту меню, пункт закрывается (схлопывается) внутри родительского пункта, содержимое отображается только при повторном клике по родителю. Другими словами раскрываешь категорию "Станки", кликаешь на вложенную категорию "Станки металлообрабатывающие" родитель "Станки"схлопывается, а при повторном клике "Станки" открывает уже с раскрытой категорией "Станки металлообрабатывающие", то бишь как надо. Как от этого лишнего клика избавиться?
  • Вопрос задан
  • 2752 просмотра
Подписаться 2 Оценить Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Python-разработчик расширенный
    14 месяцев
    Далее
  • Devman
    Вёрстка для питониста
    2 месяца
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
Решения вопроса 1
Попробуйте такой вариант, не особо тестил
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы