将引导程序下拉选择滚动条居中到所选项目
Center a Bootstrap drop-down select scroll bar to the selected item
这里有一个关于如何将<select>
滚动条居中到所选项目的问题。
我想为Bootstrap Dropdown Menu找到一种方法来做同样的事情,这样菜单就会自动滚动到.active
列表项。
这里有一些代码:
<ul>
<li class="dropdown switch">
<a href="active" class="dropdown-toggle" data-toggle="dropdown" id="switch-a">
<span>Name</span>
</a>
<ul class="dropdown-menu switch-items" id="switch-dd">
<li>...</li>
<li>...</li>
<li class="active active-dd"></li>
.
.
.
<li>...</li>
</ul>
</li>
</ul>
这可能吗?或者我必须使用HTML <select>
并花时间对其进行样式设置吗?
不仅有可能,而且实际上处理原生HTML对象比处理<select>
元素样式的神秘性和不一致性要容易得多。
您只需要使用shown.bs.dropdown
收听下拉打开事件
打开后,只需找到唯一的.active
项并调用.focus()
即可将其带入视图。
像这样:
$(".dropdown").on("shown.bs.dropdown", function() {
$(this).find(".dropdown-menu li.active a").focus()
});
堆栈代码段中的演示:
$(".dropdown.focus-active").on("shown.bs.dropdown", function() {
$(this).find(".dropdown-menu li.active a").focus()
});
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<div class="container" >
<div class="dropdown focus-active">
<a href="#" class="btn btn-primary"
data-target="#" data-toggle="dropdown"
aria-haspopup="true" role="button" aria-expanded="false">
Dropdown trigger
<span class="caret"></span>
</a>
<ul class="dropdown-menu scrollable-menu" role="menu" aria-labelledby="dLabel">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a></li>
<li><a href="#">Item 8</a></li>
<li class="active"><a href="#">Item 9</a></li>
<li><a href="#">Item 10</a></li>
<li><a href="#">Item 11</a></li>
<li><a href="#">Item 12</a></li>
</ul>
</div>
</div>
没有jquery的事件处理程序:
const activeOptionCollection = document.getElementsByClassName('active');
if (activeOptionCollection.length > 0) {
const [activeOption] = activeOptionCollection;
activeOption.scrollIntoView();
}
相关文章:
- 在BootStrap菜单栏中为所选项目设置背景,类似于BootStrap中的父导航选项
- jQuery:根据select选项中的每页项目进行分页
- 更新:仅根据单选按钮和所选选项选择特定项目
- HTML选择,在DOM中选择了正确的选项,但在firefox中显示了错误的项目
- 如何在angular js中的select选项中获取所选项目id
- 如何将一个表单中的项目添加到 Rails 中另一个表单的下拉选项
- 当表单控件选项具有多个参数时,如何在组合框中填充所选项目
- 通过单击按钮将选项卡(项目)添加到选项卡面板,扩展
- 如何将此选项添加到此图像选取器项目中
- 更新“项目”选项以进行排序
- 在呈现项目后,挖空选择绑定回调的选项
- 在单击选项卡式项目时隐藏和创建另一个对象 - HTML CSS
- 使用表排序器筛选所选选项列表中的选定项目
- jQuery 在选项列表中重新填充所选项目
- 将项目插入活动选项卡窗格
- Microsoft Dynamics Online:将所有选项集项目复制到多行文本字段(使用 JavaScript)
- 在选择选项中选择多个项目,而不使用“Ctrl”键
- jQuery Mobile,在选项列表中选择所有项目
- 从下拉列表中选择项目后,显示新选项并显示文本
- 如何在浏览器窗口/选项卡关闭时删除本地存储项目