基于此代码http://jsfiddle.net/bs5rc6k3/3/我创建了一个下拉列表，当您选择一个选项时，它会在该选项旁边添加一个复选标记。但这仅适用于单选。如何将其更改为切换功能，我可以在其中为我选择的每个选项添加复选标记，换句话说，多选复选标记？
这是我的代码：
HTML
<div class="col-lg-12">
<div class="button-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span>Column Filter</span> <span class="caret"></span></button>
<ul id="myDropdown" class="dropdown-menu">
<li><a href="#" class="toggle-vis" data-column="0"><i class="fa fa-check"></i> A</a></li>
<li><a href="#" class="toggle-vis" data-column="1"><i class="fa fa-check"></i> B</a></li>
<li><a href="#" class="toggle-vis" data-column="2"><i class="fa fa-check"></i> C</a></li>
<li><a href="#" class="toggle-vis" data-column="3"><i class="fa fa-check"></i> D</a></li>
</ul>
</div>
</div>
Javascript
<script>
$('#myDropdown > li > a').click(function(e){
$('#myDropdown > li > a').removeClass('selected');
$(this).addClass('selected');
});
</script>
CSS
#myDropdown > li > a > .fa{
visibility:hidden;
}
#myDropdown > li > a.selected > .fa{
visibility:visible;
}
使用toggleClass()方法代替addClass()并且不要从其他方法中删除它。添加dropdown('toggle')以防止菜单在单击项目后折叠。
$('#myDropdown > li > a').click(function(e){
$(this).toggleClass('selected');
$('.dropdown-menu').dropdown('toggle');
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句