带有可滚动选择列表的引导下拉菜单

Question

我正在尝试创建一个下拉列表，其中包含两个命令（Sort asc 和 Sort des），这些命令将一键执行，并列在顶部，后跟“选择过滤”下的部分，其中包含一个命令“ Toggle All”（不关闭下拉列表）和一个可滚动的名称列表（不滚动顶部的命令），可以借助复选框进行选择。

我有一个很好的方法，我无法实现的部分是只有名字的卷轴。当我尝试实现复选框然后名称更改外观时，我希望它们与复选框与其他命令对齐，然后是填充，然后是名称（不是粗体字）。 但是我得到了左对齐的框，没有填充和粗体名称。 然后是滚动条，我不能只将其设置在名称上，它会遍历所有下拉菜单，或者我会为每个名称在下面的 coed 中单独滚动。 我想创建一个子类： 这允许我为那些菜单项设置滚动条。

我已经在标签上尝试了 div:s 和 class，但我无法弄清楚。 请帮我解决这个问题。

HTML

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Names <b class="caret"></b></a>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Sort Ascending</a></li>
        <li><a href="#">Sort Descending</a></li>
        <li class="divider"></li>
        <li class="dropdown-header">Choose Filtering</li>
        <li class="divider"></li>
        <li><a href="#">Toggle All</a></li>
        <li class="divider"></li>       
        <li class="dropdown-menu-form"><label><input type="checkbox">Name 1</label></li>
        <li class="dropdown-menu-form"><label><input type="checkbox">Name 2</label></li>
        <li class="dropdown-menu-form"><label><input type="checkbox">Name 3</label></li>
        <div class="dd-list">
            <li><label><input type="checkbox">Name 4</label></li>
            <li><label><input type="checkbox">Name 5</label></li>
        </div>
    </ul>
</li>

更正的 HTML - 现在可以使用：

<div class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Consult <b class="caret"></b></a>
    <ul class="dropdown-menu" role="menu">
        <li class="dropdown-header">Choose sort method</li>
        <li class="divider"></li>
        <li><a href="#asc">Sort Ascending</a></li>
        <li><a href="#desc">Sort Descending</a></li>
        <li class="divider"></li>
        <li class="divider"></li>
        <li class="dropdown-header">Choose Filtering</li>
        <li class="divider"></li>
        <li>
            <ul class="dropdown-menu-form" role="menu">
                <li><label>Toggle All</label></li>
                <li><label class="checkbox"><input type="checkbox" />Name 1</label></li>
                <li><label class="checkbox"><input type="checkbox" />Name 2</label></li>
                <li><label class="checkbox"><input type="checkbox" />Name 3</label></li>
                <li><label class="checkbox"><input type="checkbox" />Name 4</label></li>
                <li><label class="checkbox"><input type="checkbox" />Name 5</label></li>
                <li><label class="checkbox"><input type="checkbox" />Name 6</label></li>
            </ul>
        </li>
        <li class="divider"></li>
        <li><button class="btn btn-default btn-apply" name="filter" value="Filter" type="submit">Apply Filter</button></li>
    </ul>
</div>

Java 脚本

<script>
    $('.dropdown-menu').on('click', function(e) {
        if($(this).hasClass('dropdown-menu-form')) {
            e.stopPropagation();
        }
        if($(this).hasClass('dd-list')) {
            e.stopPropagation();
        }
    });
</script>

CSS

使用：Bootstrap-3.1.1

还有我自己的 Styles.css：

li.dropdown-menu-form {
    padding: 5px 10px 0;
    max-height: 100px;
    overflow-y: scroll;
}

#dd-list {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 20px;
    padding-left: 10px;
    font-weight: normal;
    overflow-y: scroll;
}


Corrected CSS:
ul.dropdown-menu-form {
    padding-left: 20px;
    list-style-type: none;
    max-height: 100px;
    overflow-y: scroll;
}

Answer 1

你得到粗体的原因是标签选择器的 Bootstrap css 是粗体的。所以要改变它：

li.dropdown-menu-form label, .dd-list li label {
  font-weight: normal;
}

在复选框后添加填充：

li.dropdown-menu-form input, .dd-list li input {
  display: inline-block;
  margin-right: 10px;
}

为了让你的滚动条正确，你不能告诉 li.dropdown-menu-form 有一个 100px 的最大高度和溢出 y 滚动，因为这会将它应用到每个单独的列表项与类下拉菜单形式。因此，您可以尝试将下拉列表包装在 div 中，并为其分配一个不同的类，您可以对其应用 max-height 和 overflow-y 属性。 （就像你包装你的 dd 列表一样）。