javascript - 如何保持 Bootstrap 下拉复选框列表下拉

Question

我正在使用一个非常酷的 Bootstrap Dropdown-checkbox ，但它在列表上方有一个用于下拉列表的按钮，我想保留下拉列表。它与我见过的其他 CheckBoxList 控件相比毫不逊色。

它呈现的 HTML 基本上是隐藏列表的:

<div id="agency-suburbs-list" class="suburbDropdownCheckbox dropdown-checkbox dropdown">
    <button class="dropdown-checkbox-toggle" data-toggle="dropdown" href="#" aria-expanded="false">Suburbs List</button>
    <div class="dropdown-checkbox-content">
        <ul class="dropdown-checkbox-menu">
            <li>
                <div class="layout">
                    <input type="checkbox" id="247908647965.94836"><label for="247908647965.94836">Alberante</label>
                </div>
            </li>
            ...
            <li>
                <div class="layout">
                    <input type="checkbox" id="882857971221.6206"><label for="882857971221.6206">Alrode</label>
                </div>
            </li>
        </ul>
    </div>
</div>

将该 HTML 与下拉时呈现的内容进行比较，唯一的区别是最外层的 div 有一个额外的 open 类。控件网页上显示的 API 没有显示打开或关闭它的 JS 函数，而且我手动应用该类也不会打开下拉菜单；

$("#me-open").click(function(e) {
        $("#agency-suburbs-list").addClass("open");
    });

其中 me-open 只是一个额外的按钮，独立于我添加用于测试的控件。关于此控件的其他所有内容似乎都工作得很好，所以我想保留它，当用户从 select 中选择一个值时，应该填充该列表，然后还必须单击另一个按钮来填充看到所选的值是一个非常糟糕的用户体验因素。

Answer 1

该下拉复选框是 Bootstrap 模式。按下按钮时触发显示。

如果你想始终显示它，你需要添加一些 css，如下所示:

.dropdown-checkbox-content {
    display: block!important; /* or inline-block */
    position: static!important;
}

如果您想隐藏切换按钮:

dropdown-checkbox-toggle {
    display: none;
}