jquery - 选择子菜单时 Bootstrap 下拉列表添加复选图标

Question

我有以下 Bootstrap 下拉菜单:

http://jsfiddle.net/bs5rc6k3/

如何向选定的下拉菜单选项添加图标并将其类别设置为 selected ？单击新选项时，该选项将被选中。

图标是这个字体很棒的:<i class="fa fa-check"></i>

Answer 1

喜欢this demo

JS:

$('#myDropdown > li > a').click(function(e){
    $('#myDropdown > li > a').removeClass('selected');
    $(this).addClass('selected'); 
});

CSS(隐藏检查，除非它位于“选定”元素内):

#myDropdown > li > a > .fa{
    visibility:hidden;
}
#myDropdown > li > a.selected > .fa{
    visibility:visible;
}

HTML:

<div class="input-group-btn">
    <button type="button" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <!-- added an ID for the javascript -->
    <ul id="myDropdown" class="dropdown-menu" role="menu">
        <li>
             <a href="#">
                 <i class="fa fa-check"></i> 
                 <span class="search-option">Option 1</span>
             </a>
        </li>
        <li>
             <a href="#">
                  <i class="fa fa-check "></i> 
                  <span class="search-option">Option 2</span>
             </a>
        </li>
    </ul>
</div>