Question

根据此代码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;
}

Answer 1

使用toggleClass()方法代替addClass()，不要将其从其他方法中删除。添加dropdown('toggle')以防止菜单在点击项目后崩溃。

$('#myDropdown > li > a').click(function(e){
    $(this).toggleClass('selected');
    $('.dropdown-menu').dropdown('toggle');
});

下拉多选复选标记切换

1 个答案: