Question

我希望有一个按钮，在bootstrap 3中显示一个下拉菜单，每个项目旁边都有复选框，用户可以在点击每个复选框时关闭下拉菜单来检查多个菜单。怎么做到这一点？另外，是否有更好的结构/样式方式，以便复选框可以显示在项目A，项目B，项目C等的左侧？（以下代码）

    <div class="btn-group">
      <button type="button" class="btn btn-danger">Show</button>
      <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li>&nbsp;&nbsp;&nbsp;<input type="checkbox" /> <label><a href="#">Item A</a></label></li>
        <li>&nbsp;&nbsp;&nbsp;<input type="checkbox" /> <label><a href="#">Item B</a></label></li>
        <li>&nbsp;&nbsp;&nbsp;<input type="checkbox" /> <label><a href="#">Item C</a></label></li>
      </ul>
    </div>

Answer 1

你需要一个小的jQuery片段来避免关闭行为：

<强> JSFiddle

$('li').click(function(event){
    event.stopPropagation();
});

Answer 2

好吧，如果，如你所说，你到处都有li，请使用类下拉菜单设置ul的id，例如：<ul id="dropdown-menu" class="dropdown-menu" role="menu">，然后像这样修改jQuery片段：{{1 }}

如何在bootstrap 3的下拉列表中正确添加/允许多个选择复选框？

2 个答案: