选择子菜单时，Bootstrap下拉添加检查图标

Question

我有以下引导程序下拉菜单：

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（隐藏支票，除非它在'selected'元素内）：

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