html - 如何使子菜单下拉列表在父下拉列表之外可见
问题描述
目前我正在使用引导程序 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>
结果是这样的。子菜单是半隐藏的。我一直在寻找解决方案,但没有一个能解决我的问题。提前致谢
解决方案
您使用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>
推荐阅读
- python - Reverse singly linked list in python without using a temporary variable
- reactjs - How can i map nested info of an ObjectId in array?
- kubernetes - Kubernetes Cronjob with env variables
- c# - Using String reader to manage multiple lines
- xml - `,omitempty` and pointer fields in Go's standard `xml` package
- angular - Prime ng input mask not working on android device google chrome
- python - Missing Authorization Header in production only
- javascript - Loading indicator appears but does not move in react-redux
- javascript - How to make jQuery 3.6.0 work with node.js v12.16.1
- python - Ignore typehinting for line that already has a pylint ignore