HTML

Question

我正在尝试创建一个下拉列表，其中包含两个命令（Sort asc和Sort des），这些命令将在一次单击时执行，并在顶部列出，然后是“选择过滤”下的一个部分，该部分有一个命令“ Toggle All“（不会关闭下拉列表）和可滚动的命令列表（不会滚动顶部的命令），可以通过复选框选择。

我已经找到了一个很好的方法，我不能发生的部分是只有名字的卷轴。当我尝试实现复选框，然后名称改变外观，我希望它们与其他命令对齐的复选框然后填充，然后是名称（不是boled）。但是我得到了带有空格的盒子，没有填充和粗体名称。然后是滚动条，我不能只将其设置为名称，它会遍历所有下拉菜单，或者我为每个名称单独滚动，如下所示。我想创建一个子类：这允许我为这些菜单项设置滚动条。

我在标签上尝试过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，滚动溢出，因为它会将它应用于每一个具有类下拉菜单表单的单个列表项。因此，您可以尝试将下拉列表包装在div中，并为其分配一个不同的类，您可以应用max-height和overflow-y属性。（就像你包装了你的dd-list）。

带有可滚动选择列表的Bootstrap下拉列表

HTML

更正的HTML - 正在运行：

Java脚本

CSS

1 个答案: