Bootstrap 3 вертикальное меню с подменю toggable

Используя Bootstrap 3, мне нужно построить вертикальное меню, содержащее подменю toggable. У меня есть следующая структура:Bootstrap 3 вертикальное меню с подменю toggable

<nav> 
    <ul> 
     <li><a href="#">Item 1</a></li> 
     <li><a href="#">Item 2 (toggle)</a> 
      <ul> 
       <li><a href="#">Item 2.1</a></li> 
       <li><a href="#">Item 2.2</a></li> 
       <li><a href="#">Item 2.3</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Item 3</a></li> 
     <li><a href="#">Item 4</a></li> 
    </ul> 
</nav>

Я хочу UL внутри «Пункт 2», чтобы быть скрыты по умолчанию и показа/скрытия его, нажав «Пункт 2».

источник

2014-11-13 Gustavo

Ключом создания вертикального подменю toggable является использование атрибута data-toggle = "collapse" вместо наиболее часто используемого в navs data-toggle = "dropdown".

Я подготовил эту jsfiddle example, и это код wordking:

<nav> 
    <ul class="nav"> 
     <li><a href="#">Link 1</a></li> 
    <li><a href="#" id="btn-1" data-toggle="collapse" data-target="#submenu1" aria-expanded="false">Link 2 (toggle)</a> 
     <ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1"> 
     <li><a href="#">Link 2.1</a></li> 
     <li><a href="#">Link 2.2</a></li> 
     <li><a href="#">Link 2.3</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Link 3</a></li> 
    <li><a href="#">Link 4</a></li> 
    </ul> 
</nav>

источник

2014-11-13 19:20:08 Gustavo

Именно то, что мне было нужно, спасибо @Gustavo –

Было бы справедливо, чтобы отметить свой собственный ответ как принятый один – Alex

@ Gustavo, как я могу дать пробел, оставленный без нарушения, сам реагирует –

Иногда вам нужно как ссылку пункт меню и переключения для пунктов подменю.

Вот тест:

/* CSS */ 
 

 
.toggle-custom { 
 
    position: absolute !important; 
 
    top: 0; 
 
    right: 0; 
 
} 
 
.toggle-custom[aria-expanded='true'] .glyphicon-plus:before { 
 
    content: "\2212"; 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript" ></script> 
 

 
<nav> 
 
    <ul class="nav"> 
 
    <li><a href="#">Link 1</a> 
 
    </li> 
 
    <li><a href="#">Link 2</a><a href="#" class="toggle-custom" id="btn-1" data-toggle="collapse" data-target="#submenu1" aria-expanded="false"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a> 
 
     <ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1"> 
 
     <li><a href="#">Link 2.1</a> 
 
     </li> 
 
     <li><a href="#">Link 2.2</a> 
 
     </li> 
 
     <li><a href="#">Link 2.3</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Link 3</a> 
 
    </li> 
 
    </ul> 
 
</nav>

http://jsfiddle.net/zoxqpftc/461/

источник

2016-12-12 10:41:12

Bootstrap 3 вертикальное меню с подменю toggable

ответ

Смежные вопросы