堆栈内存溢出
  繁体   English   中英

搜索和滚动条下拉子菜单Bootstrap

[英]Search and Scrollbar Dropdown Submenu Bootstrap

 原文  2015-10-01 08:33:22  5   1    javascript/ jquery/ html/ css/ twitter-bootstrap

问题描述

我这里有一些问题。 请帮助我，谢谢你的进步。 这里是jsfiddle 。 问题：

  1. 我的下拉菜单中有搜索框，我也有多个子菜单。 但搜索框只对第一个下拉列表进行过滤，子菜单无法正常工作。 那么，如何使搜索框可以过滤子菜单并显示他们的父母像这张图片？ 下拉菜单过滤器

  2. 如何使我的下拉菜单有滚动条？ 我在CSS中添加了overflow: auto ，但是我的下拉子菜单变得像这张图片一样不可见。 子菜单滚动条

  3. 如何使下拉子菜单始终位于顶部？ 与其父母一样的顶部。 非常感谢你。 我正在使用bootstrap 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']();
    });
});

1 个解决方案

解决方案1
 0  2015-10-01 10:40:25

你可以尝试这个： 

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;
}
#wrapper .dropdown-submenu{
    width: 200px;
    height: 100%;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;


}

#container{
    width: 300px;
    transform: translate(50px, 0);

}

DEMO FIDDLE

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 bootstrap 上的下拉子菜单不起作用 Bootstrap中的子菜单下拉列表 Bootstrap下拉子菜单关闭上游子菜单 Bootstrap下拉密码恢复子菜单 Twitter引导程序下拉列表创建滚动条 向子菜单下拉菜单添加延迟 - bootstrap3 子菜单中的Bootstrap下拉菜单取消悬停 Bootstrap 4 在右侧显示下拉子菜单 Bootstrap 4. HTML CSS 和 jQuery 下拉子菜单 多级下拉 Bootstrap 4，子菜单与父下拉列表顶部对齐
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM