在twitter bootstrap中的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下拉插件，而是accordion plugin。所以这意味着如果你想构建像this这样的东西，只需检查code并注意你不需要像我在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');  
})

如果您想通过this page选择您喜欢的图标，可以轻松更改图标。这个图标带有引导程序，因此您可以免费使用它们，但不要忘记使用新的图标类更改javascript代码。

如果你想知道这个javascript做了什么，只需检查this page部分events，这两个事件会在您打开和关闭标签后立即触发。

Answer 2

<强> Working Fiddle

以下是方法

$(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>