@Jackie13

Как сделать раскрывающееся меню по клику на иконку в Бутстрап?

В мобильной версии Бутстрап сабменю открывается и закрывается по клику на родителя.
Что нужно сделать, чтобы меню раскрывалось по клику на иконку, а родительский элемент при этом был кликабельным.
<div class="collapse navbar-collapse navbar-ex1-collapse">
 <ul class="nav navbar-nav">
  <li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true" href="parentlink"><span class="caret"></span></a>
  <div class="dropdown-menu">
     <ul>
       <li><a href="link1"></a></li>
       <li><a href="link2"></a></li>
       <li><a href="link3"></a></li>
    </ul>
  </div>
 </ul>
</div>
  • Вопрос задан
  • 408 просмотров
Пригласить эксперта
Ответы на вопрос 1
@usica
<ul class="nav navbar-nav">
 <li class='fake'><a href='parentlink'>Ссылка</a></li>
  <li class="dropdown">
 <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true" href="parentlink">Ссылка<span class="caret"></span></a>
...
</li>

 <li class='fake'><a href='parentlink2'>Ссылка2</a></li>
  <li class="dropdown">
 <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true" href="parentlink2">Ссылка2<span class="caret"></span></a>
...
</li>


Класс fake сверстать так, чтобы находился поверх следующего li class="dropdown", но не его каретки.
Тогда при клике на текст ссылки будет переход по ссылке, при клике на каретку - раскрытие дочернего меню.

<li class='fake'><a href='parentlink'>Ссылка</a></li>

лучше добавлять через JS, тогда на этапе разработки не будет проблем с дублированием ссылок.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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