仅通过单击下拉栏来折叠引导程序下拉列表

Collapsing bootstrap dropdown ONLY by clicking on the dropdown bar

本文关键字:折叠 引导程序 下拉列表 单击      更新时间:2023-09-26

JSfiddle演示

<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' -->

嗨,当前,单击任意位置时,下拉列表都会折叠。但我只需要点击"选定的过滤器"就可以折叠。我们如何做到这一点?

提前感谢

您可以使用引导折叠而不是下拉来实现这一点。试着把你的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%">