【发布时间】：2015-12-29 05:36:57
【问题描述】：
这里是jsfiddle。问题：
-
我的下拉菜单中有搜索框，也有多个子菜单。但是搜索框只过滤第一个下拉菜单，子菜单不起作用。那么，如何让搜索框能够过滤子菜单并像这张图一样显示父级呢？
-
如何让我的下拉菜单有滚动条？我在 CSS 中添加了
overflow: auto，但我的下拉子菜单像这张图片一样变得不可见。 -
如何使下拉子菜单始终位于顶部？和它的父母一样的顶部。 非常感谢。我正在使用引导程序 3.3.5。
HTML 文件
<nav class="navbar navbar-default navbar-fixed-top">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">First<span class="sr-only">(current)</span></a>
</li>
<li><a href="#">Second</a>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown<span class="caret"></span></a>
<ul id="main-menu" class="dropdown-menu">
<li class=" row search-box">
<div class="col-sm-10">
<input class="form-control search" id="search-criteria" type="text" placeholder="Search" />
</div>
</li>
<li><a class="menu" href="#">Contact Us</a>
</li>
<li><a class="menu" href="#">Portfolio</a>
</li>
<li class="dropdown-submenu"> <a href="#" class="dropdown-toggle menu" data-toggle="dropdown">First Level</a>
<ul class="dropdown-menu">
<li><a class="menu" href="#">Second Level</a>
</li>
<li class="dropdown-submenu"> <a href="#" class="dropdown-toggle menu" data-toggle="dropdown">Second Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"> <a href="#" class="dropdown-toggle menu" data-toggle="dropdown">Third Dropdown</a>
<ul class="dropdown-menu">
<li><a class="menu" href="#">Action</a>
</li>
<li><a class="menu" href="#">Another action</a>
</li>
<li><a class="menu" href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a class="menu" href="#">Separated link</a>
</li>
<li class="divider"></li>
<li><a class="menu" href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-submenu"> <a href="#" class="dropdown-toggle menu" data-toggle="dropdown">Another Dropdown</a>
<ul class="dropdown-menu">
<li><a class="menu" href="#">Home</a>
</li>
<li><a class="menu" href="#">Home</a>
</li>
<li><a class="menu" href="#">Home</a>
</li>
<li><a class="menu" href="#">Home</a>
</li>
<li><a class="menu" href="#">Home</a>
</li>
<li><a class="menu" href="#">Home</a>
</li>
<li class="dropdown-submenu"> <a href="#" class="dropdown-toggle menu" data-toggle="dropdown">Level 2</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"> <a href="#" class="dropdown-toggle menu" data-toggle="dropdown">Level 3</a>
<ul class="dropdown-menu">
<li><a class="menu" href="#">One</a>
</li>
<li><a class="menu" href="#">Two</a>
</li>
<li><a class="menu" href="#">Three</a>
</li>
<li><a class="menu" href="#">Four</a>
</li>
<li><a class="menu" href="#">Five</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a class="menu" href="#">Home</a>
</li>
<li><a class="menu" href="#">Home</a>
</li>
<li><a class="menu" href="#">Home</a>
</li>
<li><a class="menu" href="#">Home</a>
</li>
<li><a class="menu" href="#">Home</a>
</li>
<li><a class="menu" href="#">Home</a>
</li>
</ul>
</li>
<li class="dropdown-submenu"> <a href="#" class="dropdown-toggle menu" data-toggle="dropdown">List</a>
<ul class="dropdown-menu">
<li><a class="menu" href="#">Action</a>
</li>
<li class="dropdown-submenu"> <a href="#" class="dropdown-toggle menu" data-toggle="dropdown">Menu</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"> <a href="#" class="dropdown-toggle menu" data-toggle="dropdown">Stationary</a>
<ul class="dropdown-menu">
<li><a class="menu" href="#">Book</a>
</li>
<li><a class="menu" href="#">Pen</a>
</li>
<li><a class="menu" href="#">Pencil</a>
</li>
<li class="divider"></li>
<li><a class="menu" href="#">Ruler</a>
</li>
<li><a class="menu" href="#">Paper</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li role="separator" class="divider"></li>
<li><a class="menu" href="#">Address</a>
</li>
<li role="separator" class="divider"></li>
<li><a class="menu" href="#">Another Project Collaboration</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
CSS 文件
body {
padding-top: 50px;
}
.search-box {
margin: 5px 0px;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content:" ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
JS 文件
$("#search-criteria").on("keyup", function () {
var g = $(this).val().toLowerCase();
$(".menu").each(function () {
var s = $(this).text().toLowerCase();
$(this).closest('.menu')[s.indexOf(g) !== -1 ? 'show' : 'hide']();
});
});
【问题讨论】：
-
嗨，你解决了这个问题吗 => 当你应用溢出时“下拉子菜单变得不可见”？您是否设法让它在最后可见？
-
@bootsa 你好，最后我用smartmenus
标签： javascript jquery html css twitter-bootstrap