[英]Bootstrap dropdown with scrollable selection list
我正在尝试创建一个下拉列表,其中包含两个命令(Sort asc和Sort des),这些命令将一键执行,并在顶部列出,其后是“选择过滤”下的一部分,其中包含命令“全部切换” (不关闭下拉列表)和名称的可滚动列表(不滚动顶部的命令),可通过复选框选择它们。
我已经有了一个很好的方法,我无法实现的部分是唯一名称的滚动。 当我尝试实现复选框时,名称会更改外观,我希望它们的复选框与其他命令对齐,然后与填充对齐,然后与名称对齐(不要感到厌烦)。 但是我得到了留有余地的盒子,没有填充和粗体名称。 然后是滚动条,我不能仅将其设置为名称,而是遍历所有下拉菜单,否则我将获得一个单独的滚动条,每个名称都位于下面的文本中。 我想将一个子类设为:,让我可以为那些菜单项设置滚动条。
我已经在标签上使用div:s和class进行了实验,但是我无法弄清楚。 请帮助我解决这个问题。
<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>
<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>
<script>
$('.dropdown-menu').on('click', function(e) {
if($(this).hasClass('dropdown-menu-form')) {
e.stopPropagation();
}
if($(this).hasClass('dd-list')) {
e.stopPropagation();
}
});
</script>
使用: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;
}
之所以使用粗体,是因为标签选择器的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,因为它将使用类dropdown-menu将其应用于每个单独的列表项-形成。 因此,您可以尝试将下拉列表包装在div中,并为其分配一个不同的类,您可以在其中应用max-height和overflow-y属性。 (就像包裹了dd列表一样)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.