Javascript 多选下拉菜单

我有一个问题，在一些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>

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

---

我需要一些帮助，请

文本缩进为负数，因此它正在拉动复选框。请删除该属性，看看会发生什么。

您可以这样尝试

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

它可能会帮助您：

选择


奶酪


西红柿


莫泽雷勒干酪


蘑菇


意大利 辣味 香肠


洋葱

没有变化我编辑了我的问题，解决了缩进问题，但是消失问题呢？你能告诉我如何添加滚动条吗？因为列表很长，您可以添加

overflow-y:scroll，height:

水平滚动怎么样？更好的用户体验和我的建议应该隐藏起来，因为通常人们不使用水平滚动。您保存了我的小a**

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