引导菜单下拉问题

Question

我正在做一个水平菜单就像引导，但我有一个问题，当我有一个下拉菜单里面的菜单。 这是一个代码示例，正如您看到的下拉菜单打开超出正文一样。我想如果不符合要求，那么它会向左打开。我希望你能理解我。

HTML

<div class="navbar navbar-default" role="navigation"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a> 
        <ul class="dropdown-menu multi-level"> 
         <li><a href="#">Action</a></li> 
         <li><a href="#">Another action</a></li> 
         <li><a href="#">Something else here</a></li> 
         <li class="divider"></li> 
         <li><a href="#">Separated link</a></li> 
         <li class="divider"></li> 
         <li><a href="#">One more separated link</a></li> 
         <li class="dropdown-submenu"> 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> 
          <ul class="dropdown-menu"> 
           <li><a href="#">Action</a></li> 
           <li class="dropdown-submenu"> 
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> 
            <ul class="dropdown-menu"> 
             <li class="dropdown-submenu"> 
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> 
              <ul class="dropdown-menu"> 
               <li><a href="#">Action</a></li> 
               <li><a href="#">Another action</a></li> 
               <li><a href="#">Something else here</a></li> 
               <li class="divider"></li> 
               <li><a href="#">Separated link</a></li> 
               <li class="divider"></li> 
               <li><a href="#">One more separated link</a></li> 
              </ul> 
             </li> 
            </ul> 
           </li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
       <li> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 2 <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Action</a></li> 
         <li><a href="#">Another action</a></li> 
         <li><a href="#">Something else here</a></li> 
         <li class="divider"></li> 
         <li><a href="#">Separated link</a></li> 
         <li class="divider"></li> 
         <li><a href="#">One more separated link</a></li> 
         <li class="dropdown-submenu"> 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> 
          <ul class="dropdown-menu"> 
           <li><a href="#">Action</a></li> 
           <li><a href="#">Another action</a></li> 
           <li><a href="#">Something else here</a></li> 
           <li class="divider"></li> 
           <li><a href="#">Separated link</a></li> 
           <li class="divider"></li> 
           <li class="dropdown-submenu"> 
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> 
            <ul class="dropdown-menu"> 
             <li class="dropdown-submenu"> 
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> 
              <ul class="dropdown-menu"> 
               <li><a href="#">Action</a></li> 
               <li><a href="#">Another action</a></li> 
               <li><a href="#">Something else here</a></li> 
               <li class="divider"></li> 
               <li><a href="#">Separated link</a></li> 
               <li class="divider"></li> 
               <li><a href="#">One more separated link</a></li> 
              </ul> 
             </li> 
            </ul> 
           </li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
</div> 

CSS

.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>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

$(function(){ 
    $(".dropdown-submenu").on("click",function(e){ 
    var current=$(this).find(".dropdown-menu").first(); 
    console.log(current); 
     current.toggle(); 
     e.stopPropagation(); 
    }); 


$(document).click(function(){ 
    $(".dropdown-menu").hide('slow'); 
}); 


}); 

Answer 1

试试这个，

$(function() { 
    $(".dropdown-submenu").on("click", function(e) { 
    var current = $(this).find(".dropdown-menu").first(); 
    current.toggle(); 
    if ($('body')[0].scrollWidth > $('body')[0].clientWidth) { 
     $(this).find('.dropdown-menu').toggleClass('on-left'); 
    } 
    console.log(current); 
    e.stopPropagation(); 
    }); 
    $(document).click(function() { 
    $(".dropdown-menu").hide('slow'); 
    }); 
}); 

和CSS，

.dropdown-menu.on-left{ 
     left: -100% !important; 
    width: 100%; 
} 

上面的代码检查，无论是屏幕尺寸超过了原来的大小，如果确实如此，该脚本将AC类on-left下拉。

条件： $('body')[0].scrollWidth > $('body')[0].clientWidth

这里的笔， https://codepen.io/lokesh_coder/pen/RRJqWN

谢谢！

Answer 2

添加此类pull-left该类dropdown-submenu

<li class="dropdown-submenu pull-left"> 

Answer 3

根据我对UX方面的理解。最佳做法是，如果菜单项对齐到右侧，则子菜单应与左侧对齐。可能像“Lalji Tadhani”建议的那样。