javascript - Bootstrap collapsible side menu items - Stack Overflow

admin管理员组

文章数量:1355597

I am trying to make a bootstrap side menu that makes sub items collapsible.

Similar to / However I want link items in the submenus and not such a plicated structure.

This is what I tried

 <div class="row">
      <!-- Main ponent for a primary marketing message or call to action -->
        <div class="col-sm-3 col-md-2 sidebar">
           <ul class="nav nav-sidebar">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">More<b class="caret"></b></a>
                <ul class="dropdown-menu">
                <li><a href="#">Blog</a></li>
                <li><a href="#">About US</a></li>
                <li><a href="#">Jobs</a></li>
                </ul>
            </li>
             <li><a href="">Nav item again</a></li>
            <li><a href="">One more nav</a></li>
            <li><a href="">Another nav item</a></li>
         </ul>

        </div> 
  </div>

The dropable submenu does not push the rest of the items on the list down but rather appear on top of them. That makes it hard to navigate.

I am trying to make a bootstrap side menu that makes sub items collapsible.

Similar to http://jsfiddle/ However I want link items in the submenus and not such a plicated structure.

This is what I tried

 <div class="row">
      <!-- Main ponent for a primary marketing message or call to action -->
        <div class="col-sm-3 col-md-2 sidebar">
           <ul class="nav nav-sidebar">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">More<b class="caret"></b></a>
                <ul class="dropdown-menu">
                <li><a href="#">Blog</a></li>
                <li><a href="#">About US</a></li>
                <li><a href="#">Jobs</a></li>
                </ul>
            </li>
             <li><a href="">Nav item again</a></li>
            <li><a href="">One more nav</a></li>
            <li><a href="">Another nav item</a></li>
         </ul>

        </div> 
  </div>

The dropable submenu does not push the rest of the items on the list down but rather appear on top of them. That makes it hard to navigate.

• javascript
• jquery
• css
• twitter-bootstrap

Share Improve this question Follow edited Feb 24, 2014 at 10:44 johnkavanagh 4,67422 gold badges2727 silver badges3737 bronze badges asked Feb 23, 2014 at 21:58 iordanisiordanis 1,28422 gold badges1515 silver badges2828 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Would you not be better using panels and the collapse plugin to make a simple accordion? Here's an example to show what I mean. It does what I think you want.

<div class="row">
    <div class="col-sm-3 col-md-2 sidebar">
        <ul class="nav nav-sidebar">
            <li>
                <div class="panel-group" id="accordion">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                    More
                                </a>
                            </h4>
                        </div>
                        <div id="collapseOne" class="panel-collapse collapse in">
                            <div class="panel-body">
                                <ul>
                                    <li><a href="#">Blog</a></li>
                                    <li><a href="#">About US</a></li>
                                    <li><a href="#">Jobs</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
            </li>
            <li><a href="">Nav item again</a></li>
            <li><a href="">One more nav</a></li>
            <li><a href="">Another nav item</a></li>
        </ul>
    </div>
</div>

本文标签： javascriptBootstrap collapsible side menu itemsStack Overflow