如何使子菜单下拉列表在父下拉列表之外可见

Question

目前我正在使用 bootstrap 3 制作多级下拉菜单。我希望子菜单在父下拉菜单之外可见。这就是我所做的

HTML、CSS 和 JavaScript：

$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="navbar-collapse-1" class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li class="dropdown"><a href="home.do">Test</a></li>
    <li class="dropdown">
      <a href="product.do" data-toggle="dropdown" class="dropdown-toggle">Test 1<b class="caret"></b></a>
      <ul role="menu" class="dropdown-menu col-xs-2" style="height: auto; max-height: 1000px; overflow-x: hidden;">
       <li><a href="#"></a></li>
       <li><a href="#">Anting</a></li>
       <li><a href="#">Cincin</a></li>
       <li><a href="#">Diamond Jewelry</a></li>
       <li><a href="#">Dinar</a></li>
       <li class="dropdown-submenu">
         <a href="#" class="test" tabindex="-1" href="#">Fine Gold<span class="caret"></span></a>
         <ul class="dropdown-menu">
           <li><a tabindex="-1" href="#">Toko abc</a></li>
           <li><a tabindex="-1" href="#">Toko cde</a></li>
         </ul>
        </li>
       <li><a href="#">Gelang</a></li>
       <li><a href="#">Kalung</a></li>
       <li><a href="#">Liontin</a></li>
       <li><a href="#">Pin & Accessories</a></li>
      </ul>
   </li>
  <li class="dropdown"><a href="about.do">Test 2</a></li>
 </ul>
</nav>

结果是这样的。子菜单是半隐藏的。我一直在寻找解决方案，但没有一个能解决我的问题。提前致谢

Answer 1

您可以在子菜单中使用position: absolute;，并且可以使用toggleClass() 来显示和隐藏菜单。检查下面的代码。

$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggleClass('show');
    e.stopPropagation();
    e.preventDefault();
  });
});

.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{
  position:relative;
}
.dropdown-menu.submenu{
display:none;
}

.dropdown-menu.submenu.show {
    position: absolute;
    top: 5px;
    left: 50px;
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="navbar-collapse-1" class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li class="dropdown"><a href="home.do">Test</a></li>
    <li class="dropdown">
      <a href="product.do" data-toggle="dropdown" class="dropdown-toggle">Test 1<b class="caret"></b></a>
      <ul role="menu" class="dropdown-menu col-xs-2" style="height: auto; max-height: 1000px; overflow-x: hidden;">
       <li><a href="#"></a></li>
       <li><a href="#">Anting</a></li>
       <li><a href="#">Cincin</a></li>
       <li><a href="#">Diamond Jewelry</a></li>
       <li><a href="#">Dinar</a></li>
       <li class="dropdown-submenu">
         <a href="#" class="test" tabindex="-1" href="#">Fine Gold<span class="caret"></span></a>
         <ul class="dropdown-menu submenu">
           <li><a tabindex="-1" href="#">Toko abc</a></li>
           <li><a tabindex="-1" href="#">Toko cde</a></li>
         </ul>
        </li>
       <li><a href="#">Gelang</a></li>
       <li><a href="#">Kalung</a></li>
       <li><a href="#">Liontin</a></li>
       <li><a href="#">Pin & Accessories</a></li>
      </ul>
   </li>
  <li class="dropdown"><a href="about.do">Test 2</a></li>
 </ul>
</nav>