您如何限制引导 btn-dropdowns 中显示的项目数量

Question

我正在使用引导程序制作一个搜索栏，其中一个元素是类别列表。问题在于，当我按下类别按钮时，它会同时显示列表中的每个类别 - 使 UI 变得糟糕！如何限制同时显示的选项数量？

这是问题的一个例子：

例如，我可能只想显示前 5 个选项，然后为其余选项显示滚动条？

这是用于创建我目前所拥有的标记：

<form class="navbar-form" role="search" action="/search" method="get">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Search for an event" name="q" id="q">
        <div class="input-group-btn">
        <div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
  Dropdown
  <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<% @categories.each do |category| %>
<% category.sub_categories.each do |sub_category| %>
<li><a href="#"><%= sub_category.name %></a></li>
<% end %>
<% end %>
</ul>

可以在此处找到我们正在使用的用于尝试显示问题的小提琴：http://jsfiddle.net/c7vcuLsa/2/

Answer 1

为什么不直接向 UL 添加溢出？

http://jsfiddle.net/0Lmjppsz/1/

.menu-scroll {
  overflow-y: scroll;
  max-height: 200px;
}

Answer 2

伙计——如果你能找到一种方法来阻止下拉菜单关闭，我在这里有一个非常巧妙的解决方案：

来自旧的fiddle。

这是我的fiddle。

$(document).ready(function () {
    var $lis = $(".dropdown-menu li").hide();
    $lis.slice(0, 5).show();
    var size_li = $lis.length;
    var x = 5,
    start = 0;
$('#next').click(function () {
    if (start + x < size_li) {
        $lis.slice(start, start + x).hide();
        start += x;
        $lis.slice(start, start + x).show();
    }
});
$('#prev').click(function () {
    if (start - x >= 0) {
        $lis.slice(start, start + x).hide();
        start -= x;
        $lis.slice(start, start + x).show();
    }
    });
});

当您使用“上一个”和“下一个”按钮时，它会在列表中滚动，但现在下拉菜单关闭，我承认现在玩它有点太累了。

不确定您对 js 的了解程度如何，但这会解决问题。你的情况有点不同，因为你有输入组。

http://jsfiddle.net/KyleMit/ZS4L7/