twitterbootstrap中的SlideToggle下拉菜單

Question

我使用twitter bootstrap創建一個下拉菜單，現在我希望它像這樣Link或Link一樣滑動。 我的HTML是

  <div class="col-md-2 sidebar navbar-fixed-top">
<div class="top_space">

      <div class="dropdown">
          <ul class="nav">
              <li class="dropdown nav"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                  <ul class="dropdown-menu nav" role="menu" aria-labelledby="dropdownMenu1">
                      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
                      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
                      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
                      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
                  </ul>
              </li>
          </ul>

      </div>
    <hr class="hrc"/>
    <br class="dropdown-difference"/>
    <div class="dropdown">

        <ul class="nav">
            <li class="dropdown nav" id="slide"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                <ul class="dropdown-menu nav" role="menu" aria-labelledby="dropdownMenu1">
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <hr class="hrc"/>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li><span class="divider"></span>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
                </ul>
            </li>
        </ul>
    </div>

</div>

在提及鏈接的側邊欄中，當有人單擊主/頭/父菜單時，孩子將向下滑動，但不會影響其他任何元素...

但就我而言，它將在第二個下拉列表上滑動並影響其子元素。....有關完整代碼和結果，請單擊FIDDLE

Answer 1

實際上，您所需的不是bootstrap dropdown插件，而是手風琴插件 。 因此，這意味着如果您要構建這樣的內容 ，只需檢查代碼並注意，您不需要使用!important就像我在css文件中使用的那樣!important ，因為如果您在bootstrap.css文件之后加載css，您將覆蓋它。

<br>
<div class="col col-xs-12">
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Layouts
                        <span class="glyphicon glyphicon-plus pull-right"></span>
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body">
                    <ul class="sub-menu-list" style="display: block;">
                        <li><a href="#"> Blank Page</a></li>
                        <li><a href="#"> Boxed Page</a></li>
                        <li><a href="#"> Sidebar Collapsed</a></li>
                        <li><a href="#"> Horizontal Menu</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwo">
                <h4 class="panel-title">
                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        UI Elements
                        <span class="glyphicon glyphicon-plus pull-right"></span>
                    </a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                <div class="panel-body">
                    <ul class="sub-menu-list" style="display: block;">
                        <li><a href="#"> General</a></li>
                        <li><a href="#"> Buttons</a></li>
                        <li><a href="#"> Tabs &amp; Accordions</a></li>
                        <li><a href="#"> Typography</a></li>
                        <li><a href="#"> Slider</a></li>
                        <li><a href="#"> Panels</a></li>
                        <li><a href="#"> Widgets</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingThree">
                <h4 class="panel-title">
                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        Components
                        <span class="glyphicon glyphicon-plus pull-right"></span>
                    </a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                <div class="panel-body">
                    <ul class="sub-menu-list" style="display: block;">
                        <li><a href="#"> Grids</a></li>
                        <li><a href="#"> Media Gallery</a></li>
                        <li><a href="#"> Calendar</a></li>
                        <li><a href="#"> Tree View</a></li>
                        <li><a href="#"> Nestable</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

和CSS：

.panel {
    border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
    margin-top: 0px !important;
    border: 0px !important;
}

.panel-body {
    padding: 0px !important;
    border: 0px !important;
}

.panel-heading {
    padding: 0; 
    background: #424f63 !important;
    color: #fff !important;    
    border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
}

.panel-heading:hover {
    background: #353f4f !important;
    color: #65cea7 !important;
}

.panel-heading h4 a{
    padding: 12px 20px;
    display: block;
    outline: none;
}

.panel-heading h4 a:active, .panel-heading h4 a:focus {
    text-decoration: none;
}    

.panel-heading h4 a:hover{
    text-decoration: none;
}

.sub-menu-list {
    background: none repeat scroll 0 0 #353f4f;
    display: none;
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.sub-menu-list > li > a {
    color: #fff;
    display: block;
    font-size: 13px;
    padding: 10px 5px 10px 50px;
    transition: all 0.2s ease-out 0s;
}

和javascript代碼：

$('#accordion').on('hide.bs.collapse', function () {
  $(this).find("a").find('span.glyphicon-minus').removeClass('glyphicon-minus').addClass('glyphicon-plus');   
  $(this).find("a:not(.collapsed)").find('span').removeClass('glyphicon-plus').addClass('glyphicon-minus');   
})

$('#accordion').on('show.bs.collapse', function () {
  $(this).find("a:not(.collapsed)").find('span').removeClass('glyphicon-plus').addClass('glyphicon-minus');  
})

如果要更改圖標，可以從此頁面中選擇所需的圖標，輕松完成。 該圖標是隨引導程序一起提供的，因此您可以免費使用它們，但不要忘記使用新的圖標類更改javascript代碼。

如果您想知道此javascript的功能，只需檢查此頁面部分的events ，即可在打開和關閉標簽后立即觸發這兩個事件。

Answer 2

工作小提琴

下面是方法

 $(function() { $('.nav .dropdown').hover(function() { $('.dropdown-menu', this).dropdown('toggle') }); $('.dropdown').on('show.bs.dropdown', function(e) { e.relatedTarget.stop(1).slideDown(); }).on('hide.bs.dropdown', function() { $('.dropdown-menu', this).stop(1).slideUp() }); }); 

 .sidebar { height: 1200px; float: none; padding: 0px; margin: 0px; max-height: 100%; background: #59646E; } .top_space { margin-top: 56px; } .sidebar .dropdown li { width: 100%; background: #282828; color: #000; } .dropdown-menu li a { color: silver !important; } .dropdown-menu li a:hover { color: #255 !important; } .dropdown-menu .divider { margin: 0 !important; background: gray !important; border-left: 5px solid #59646E; border-right: 5px solid #282828; } .sidebar .dropdown li { border-left: 5px solid #59646E; } .sidebar .dropdown ul li:hover { border-left: 5px solid #012773; } .sidebar .dropdown li ul { width: 100%; background: #222222; } .sidebar .nav { position: absolute; list-style: none; width: 100%; } .dropdown-difference { margin-top: -18px; } .hrc { background: #eeeeee; width: 100%; } 

 <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <div class="col-md-2 sidebar navbar-fixed-top"> <div class="top_space"> <div class="dropdown"> <ul class="nav"> <li class="dropdown nav"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> <ul class="dropdown-menu nav" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a> </li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a> </li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a> </li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a> </li> </ul> </li> </ul> </div> <hr class="hrc" /> <br class="dropdown-difference" /> <div class="dropdown"> <ul class="nav"> <li class="dropdown nav" id="slide"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> <ul class="dropdown-menu nav" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a> </li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a> </li> <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a> </li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a> </li> </ul> </li> </ul> </div> </div> </div>