我感到困惑和沮丧。我需要一个不是悬停的移动 Bootstrap 菜单。我需要它没有任何 jquery 或 javascript。我有几个例子,但没有人这样做。这个 codepen 是最接近的,但是它使用了一些 jquery,它不能在我试图让这个菜单工作的愚蠢的 sparkpay 网站上工作。
代码笔:http://codepen.io/iamgonge/pen/VpzMXL 查询:
(function($){
$(document).ready(function(){
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);
CSS:
.top{height: 150px;}.marginBottom-0 {margin-bottom:0;}
.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 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:#cccccc;
margin-top:5px;
margin-right:-10px;}
.dropdown-submenu:hover>a:after{
border-left-color:#555;}
.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;}
.navbar{background-color: #4F96BA;}
html:
<header class="top"></header>
<div id="nav">
<nav class="navbar navbar-inverse navbar-static-top marginBottom-0" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<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="#" target="_blank">LOGO</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Software <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Microsoft Office</a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Microsoft Office 2016</a>
<ul class="dropdown-menu">
<li>
<a href="/office-2016-home-business.aspx">Office 2016 Home & Business</a>
</li>
<li>
<a href="/office-2016-home-student.aspx">Office 2016 Home & Student</a>
</li>
<li>
<a href="/office-2016-mac.aspx">Office 2016 MAC</a>
</li>
<li>
<a href="/office-2016-pro-plus.aspx">Office 2016 Pro Plus</a>
</li>
<li>
<a href="/office-2016-professional.aspx">Office 2016 Professional</a>
</li>
<li>
<a href="/office-2016-standard.aspx">Office 2016 Standard</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li><!--topend-->
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</div>
<!--nav-->
<div class="container">
<div class="row">
<h1>You Like It ?</h1>
<br>
</div>
</div>
最佳答案
我认为最接近于单独使用 CSS 来完成菜单的方法是使用复选框 hack。这是一个简单的演示,说明了总体思路。
label, a {
color: #09c;
text-decoration: underline;
cursor: pointer;
}
ul ul,input {
display: none;
}
input:checked ~ ul {
display: block;
}
<nav>
<ul>
<li>
<a href="#">link</a>
</li>
<li>
<input id="input" type="checkbox">
<label for="input">menu</label>
<ul>
<li>
<a href="#">link</a>
</li>
<li>
<input id="input2" type="checkbox">
<label for="input2">menu</label>
<ul>
<li>
<a href="#">link</a>
</li>
<li>
<input id="input3" type="checkbox">
<label for="input3">menu</label>
<ul>
<li>
<a href="#">link</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">link</a>
</li>
</ul>
</nav>
关于jquery - 我需要一个多级移动导航栏来 Bootstrap NO HOVER,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42799173/