仅通过单击下拉栏来折叠引导程序下拉列表
Collapsing bootstrap dropdown ONLY by clicking on the dropdown bar
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%">
相关文章:
- 引导程序/轨道-可折叠导航栏没有'我不能在手机上工作
- 引导程序折叠文本更改
- Angular UI&引导程序:点击链接时折叠移动导航栏
- 引导程序 3 折叠面板中的 Jquery 数据表响应插件
- 折叠导航按钮不适用于twitter引导程序设计的移动设备
- 引导程序导航栏未使用平滑滚动脚本折叠
- 折叠多个导航栏引导程序
- 折叠引导程序中的标签
- 引导程序 3 折叠可以在以编程方式打开面板后打开多个面板
- 如何将切换事件链接到单个引导程序折叠标题
- 最小化或折叠引导程序 2.3.2 模式对话框
- 引导程序折叠,仅显示一个元素
- Twitter引导程序不可折叠导航栏
- UI引导程序折叠不会't在新路线上重置
- 引导程序折叠菜单
- 引导程序导航栏折叠下拉菜单
- 引导程序可折叠导航未折叠
- 引导程序只打开您单击的折叠
- 使用引导程序折叠切换图示符
- 仅通过单击下拉栏来折叠引导程序下拉列表