Expand menu, show submenu

问题:

I'm trying to create an "expandable" menu. So, if a user clicks on option A two suboptions should show up. I'm trying to do something like this but in a menu...

This is my code so far...

<li>  <a href="?op=1" data-toggle="collapse" data-target=".nav-collapse88"><i class="icon-picture icon-white"></i> Galleries</a>                         <div class="nav-collapse88">                             <ul>                                   <li>                                     <a href=""><i class="icon-play"></i> Add</a>                                   </li>                                   <li>                                     <a href=""><i class="icon-play"></i> Delete</a>                                   </li>                              </ul>                         </div>                       </li> 

So when I click on galleries the options Add and Delete should appear. Any suggestions?

回答1:

I would nest ul's like so:

<ul>    <li>       <a class="expand">Link used to expand</a>       <ul>         <li>Sub Menu Item</li>         <li>Sub Menu Item</li>         <li>Sub Menu Item</li>       </ul>   </li> </ul> 

The I would use this jquery:

$(document).on('click', 'a.expand', function(e) {   e.preventDefault();   $(this).siblings('ul').slideToggle(); }); 

You would need to set the sub menu CSS to display none.

Something along these lines should do the trick.

回答2:

This works:

<ul>   <li class="dropdown">     <a href="?op=1">Support</a>     <ul class="dropdown-menu" role="menu">       <li><a href=""><i class="icon-play"></i> Add</a></li>       <li><a href=""><i class="icon-play"></i> Delete</a></li>     </ul>   </li> </ul> 

回答3:

I believe you want the class to be dropdown not collapse. That's how the bootstrap documentation recommends it for menus.

Change the class to be dropdown, remove the inner div, and add the class dropdown-menu the inner ul.

<li class="dropdown"> <a href="?op=1" data-toggle="dropdown"><i class="icon-picture icon-white"></i>>Galleries</a>                         <ul class="dropdown-menu">                               <li>                                 <a href=""><i class="icon-play"></i> Add</a>                               </li>                               <li>                                 <a href=""><i class="icon-play"></i> Delete</a>                               </li>                          </ul>                   </li> 

回答4:

tyy this http://jsfiddle.net/68RXP/213/

文章来源: Expand menu, show submenu