搜索和滾動條下拉菜單引導

我在這裏有一些問題。請幫助我，並感謝先進。這裏的jsfiddle。問題：搜索和滾動條下拉菜單引導

我在我的下拉菜單中有搜索框，我也有多個子菜單。但搜索框僅在第一個下拉列表中過濾，子菜單無法工作。那麼，如何讓搜索框可以過濾子菜單並顯示其父圖像？
如何讓我的下拉菜單有滾動條？我在CSS中添加了overflow: auto，但是我的下拉菜單變得像這張圖片一樣隱形。
如何使下拉菜單始終位於頂部？頂部像父母一樣。非常感謝。我正在使用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'](); 
    }); 
});

來源

2015-10-01 Devan J.

嗨，你有沒有設法解決這個問題=>「下拉菜單變得不可見」當你應用溢出？你有沒有設法讓它看到最後？ – bootsa

@bootsa嗨，最後我用[smartmenus]（http://www.smartmenus.org/docs/） –

你可以試試這個：

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

來源

2015-10-01 10:40:25

謝謝，但那還不能解決我的問題1-3。 –

ya先生@DevanJ先生。如果你喜歡我的回答請投票 –

搜索和滾動條下拉菜單引導

回答

相關問題