Css 如何限制引导btn下拉列表中显示的项目数

我正在做一个带有引导的搜索栏，其中一个元素是一个类别列表。问题是，当我按下分类按钮时，它会同时显示列表中的每一个类别——这让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>

下拉列表

我们正在使用的一把小提琴试图显示问题，可以在这里找到：

伙计——如果你能想出一种方法来阻止下拉菜单关闭，我这里有一个非常简洁的解决方案：

它来自一个古老的地方

这是我的名片

$（文档）.ready（函数（）{
var$lis=$（“.dropdown menu li”）.hide（）；
$lis.slice（0,5.show（）；
var size_li=$lis.length；
var x=5，
开始=0；
$（“#下一步”）。单击（函数（）{
如果（开始+x<尺寸）{
$lis.slice（start，start+x）.hide（）；
开始+=x；
$lis.slice（start，start+x）.show（）；
}
});
$（'#prev'）。单击（函数（）{
如果（开始-x>=0）{
$lis.slice（start，start+x）.hide（）；
开始-=x；
$lis.slice（start，start+x）.show（）；
}
});
});

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

不确定你对js有多好，但这会解决问题。您的情况有点不同，因为您有输入组

伙计——如果你能想出一种方法来阻止下拉列表关闭，我这里有一个非常简洁的解决方案：

它来自一个古老的地方

这是我的名片

$（文档）.ready（函数（）{
var$lis=$（“.dropdown menu li”）.hide（）；
$lis.slice（0,5.show（）；
var size_li=$lis.length；
var x=5，
开始=0；
$（“\next”）。单击（函数（）{
如果（开始+x<尺寸）{
$lis.slice（start，start+x）.hide（）；
开始+=x；
$lis.slice（start，start+x）.show（）；
}
});
$（'#prev'）。单击（函数（）{
如果（开始-x>=0）{
$lis.slice（start，start+x）.hide（）；
开始-=x；
$lis.slice（start，start+x）.show（）；
}
});
});

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

不确定你对js有多好，但这会解决问题。您的情况有点不同，因为您有输入组

---

为什么不在UL中添加溢出

---

为什么不在UL中添加一个溢出

---

你能创造一个小提琴手吗？我有几个主意。这是小提琴：非常感谢！我正在试着让安迪看看我有什么，看看你能不能从那里开始。你能创造一个小提琴手吗？我有几个主意。这是小提琴：非常感谢！我想看看我有什么，看看你是否可以从那里去。问题是，我想它字面上滚动，我不能让用户必须按下下一步，上一步按钮！问题是，您必须将ul周围的包装溢出设置为溢出，并且没有包装。问题是-我希望它可以滚动，我不能让用户必须按“下一步”、“上一步”按钮！问题是，您必须将ul周围的包装溢出设置为溢出，并且没有包装。我认为这是因为滚动条由于任何原因被切断。干得好@Mike！；）我想这是因为滚动条因为任何原因被切断了。干得好@Mike！；）

$(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();
    }
    });
});

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