多选下拉菜单

Question

我在一些Html和CSS代码中有一个问题，我想做多选下拉菜单，但我遇到了问题。

我想做的是这样的：

到目前为止我所做的是

这是我的Html代码：

<div class="btn-group">
    <button type="button" class="multiselect dropdown-toggle btn btn-default"
            data-toggle="dropdown" title="Columns">
        Columns
        <b class="caret">
        </b>
    </button>
    <ul class="dropdown-menu">
        <li>
            <label class="checkbox">

                <input type="checkbox" name="multiselect" value="cheese">Cheese</input>

            </label>
        </li>
        <li>
            <label class="checkbox">

                <input type="checkbox" name="multiselect" value="tomatoes">Tomatoes</input>

            </label>
        </li>
        <li>
            <label class="checkbox">

                <input type="checkbox" name="multiselect" value="mozarella">Mozzarella</input>

            </label>
        </li>
        <li>
            <label class="checkbox">

                <input type="checkbox" name="multiselect" value="mushrooms">Mushrooms</input>

            </label>
        </li>
        <li>
            <label class="checkbox">

                <input type="checkbox" name="multiselect" value="pepperoni">Pepperoni</input>

            </label>

        </li>
        <li>
            <label class="checkbox">

                <input type="checkbox" name="multiselect" value="onions">Onions</input>

            </label>
        </li>
    </ul>
</div>

和我的css代码：

   ul.dropdown-menu {
    height: auto;
    width: auto;
}

ul.dropdown-menu li {
    height: auto;
    width: auto;

}
ul.dropdown-menu li label {
    display: block;
    padding-left: 40px;
}

我的问题是，当我选择任何复选框输入时，块会消失，我应该再次打开它来选择值！

我需要一些帮助

Answer 1

你可以这样试试

$(document).on('click', '.dropdown-menu', function (e) {
  e.stopPropagation(); // it will not propagate the action to parent for closing
});

Answer 2

文本缩进是否定的，因此它会拉动复选框。 请删除该属性，看看会发生什么。

Answer 3

它可以帮助你：

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="button-group"> <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="caret"></span>Choose </button> <ul class="dropdown-menu"> <li> <input type="checkbox" name="multiselect" value="cheese">Cheese</input> </li> <li> <input type="checkbox" name="multiselect" value="tomatoes">Tomatoes</input> </li> <li> <input type="checkbox" name="multiselect" value="mozarella">Mozzarella</input> </li> <li> <input type="checkbox" name="multiselect" value="mushrooms">Mushrooms</input> </li> <li> <input type="checkbox" name="multiselect" value="pepperoni">Pepperoni</input> </li> <li> <input type="checkbox" name="multiselect" value="onions">Onions</input> </li> </ul> </div> </div> </div> </div>