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

时间:2015-10-01 08:33:23

标签: javascript jquery html css twitter-bootstrap

我在这里遇到了一些问题。请帮助我,谢谢你的进步。 这里是jsfiddle。问题:

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

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

  3. 如何让下拉子菜单始终位于顶部?与其父母一样的顶部。 非常感谢你。我使用bootstrap 3.3.5。

  4. 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 个答案:

答案 0 :(得分:0)

你可以尝试这个:

public ActionResult Index()
{
    var tenantName = "Get tenant based on your strategy, for example tenant1 or tenant2";
    var db= DbHelper.GetDbContext(tenantName)
    var model= db.Products.ToList();
    return View(model);
}

DEMO FIDDLE