仅通过单击下拉栏折叠引导下拉菜单答案

【问题标题】：Collapsing bootstrap dropdown ONLY by clicking on the dropdown bar仅通过单击下拉栏折叠引导下拉菜单
【发布时间】：2015-12-29 04:01:09
【问题描述】：

JSfiddle Demo

<ul class="nav navbar-nav" style="width:100%" />
<li class="dropdown dropdown-lg open" style="width:100%">
  <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"><i class="fa fa-th-large fa-fw"></i>Selected Filters<`enter code here`b class="caret"></b></a>
  <div class="dropdown-menu dropdown-menu-lg" style="width:100%">
    <div class="row">
      <div class="col-md-4 col-sm-4">
        <h4 class="dropdown-header">Features<span class="label label-inverse ng-binding">1</span></h4>
        <div class="col-md-6 col-xs-6">
          <ul class="nav">
            <!-- ngRepeat: feature in featuresSelected | orderBy:'attributename' -->
            <li ng-repeat="feature in featuresSelected | orderBy:'attributename'" ng-click="uncheckFeature(feature)" class="ng-scope"><a href="javascript:;" class="text-ellipsis ng-binding"><i class="fa fa-times text-inverse"></i> Customer</a>
            </li>
            <!-- end ngRepeat: feature in featuresSelected | orderBy:'attributename' -->
          </ul>
        </div>
      </div>
      <div class="col-md-4 col-sm-4">
        <h4 class="dropdown-header">Categories<span class="label label-inverse ng-binding">2</span></h4>
        <ul class="nav">
          <!-- ngRepeat: category in categoriesSelected | orderBy:'filterattributevalue' -->
          <li ng-repeat="category in categoriesSelected | orderBy:'filterattributevalue'" ng-click="uncheckCategory(category)" class="ng-scope"><a class="text-ellipsis ng-binding"><i class="fa fa-times text-inverse" style="cursor:pointer;"></i> 3D Printing</a>
          </li>
          <!-- end ngRepeat: category in categoriesSelected | orderBy:'filterattributevalue' -->
          <li ng-repeat="category in categoriesSelected | orderBy:'filterattributevalue'" ng-click="uncheckCategory(category)" class="ng-scope"><a class="text-ellipsis ng-binding"><i class="fa fa-times text-inverse" style="cursor:pointer;"></i> Accounting</a>
          </li>
          <!-- end ngRepeat: category in categoriesSelected | orderBy:'filterattributevalue' -->
        </ul>
      </div>
      <div class="col-md-4 col-sm-4">
        <h4 class="dropdown-header">Locations<span class="label label-inverse ng-binding">1</span></h4>
        <ul class="nav">
          <!-- ngRepeat: location in locationsSelected | orderBy:'filterattributevalue' -->
          <li ng-repeat="location in locationsSelected | orderBy:'filterattributevalue'" ng-click="uncheckLocation(location)" class="ng-scope"><a href="javascript:;" class="text-ellipsis ng-binding"><i class="fa fa fa-times text-inverse"></i> Africa (Guinea-Bissau)</a>
          </li>
          <!-- end ngRepeat: location in locationsSelected | orderBy:'filterattributevalue' -->

嗨，目前，单击任何位置时下拉列表会折叠。但我只需要在单击“选定的过滤器”时折叠它。我们如何做到这一点？

提前致谢

【问题讨论】：

移除 data-toggle="dropdown" 并编写自己的脚本。refer

标签： javascript css drop-down-menu twitter-bootstrap-3

【解决方案1】：

您可以使用引导折叠而不是下拉来实现此目的。尝试将第 3-4 行更改为类似于：

<a href="#collapse-menu" data-toggle="collapse" aria-expanded="true"><i class="fa fa-th-large fa-fw"></i>Selected Filters<b class="caret"></b></a>
<div id="collapse-menu" class="collapse" style="width:100%">

【讨论】：