Question

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

您好，目前，点击任何地方的下拉都会崩溃。但是我只需要点击“选定的过滤器”就可以折叠它。我们如何实现这一目标？

提前致谢

Answer 1

您可以使用bootstrap折叠而不是下拉来实现此目的。尝试将第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%">

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

1 个答案: