这里有一个关于如何 center a <select>
scroll bar to the selected item 的问题.
我想找到一种方法来为 Bootstrap 下拉菜单做同样的事情,以便菜单自动滚动到 .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>
样式的神秘和不一致要容易得多。元素。
你只需要听dropdown open event与 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>
关于javascript - 将 Bootstrap 下拉选择滚动条居中到所选项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28612125/