使用Bootstrap 3。
我正在尝试使用悬停在桌面上来保持我的网站导航工作，但在使用移动导航时，我希望导航在点击时打开。我似乎无法选择与我所拥有的一起工作。我对CSS没有很好的掌握，所以我可能会把它搞砸了......或者说很大......
现在，该网站在桌面版本上工作正常，点击导航打开然后悬停打开剩余的子链接。问题是当我将页面宽度减小到移动版本时，导航无法正常工作。我得到的是在悬停时打开导航，但我希望每个链接只在点击时打开。
我创建了一个bootply作为示例：http://www.bootply.com/tjL1FPgPT4
HTML：
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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">SiteName</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="menu-item dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">LinkHere<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-header">Names</li>
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Level1</a>
<ul class="dropdown-menu">
<li class="menu-item ">
</li><li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Level2.1</a>
<ul class="dropdown-menu">
<li>
<a href="#">Level3-Link1</a>
<a href="#">Level3-Link2</a>
</li>
</ul>
</li>
<li class="menu-item ">
</li><li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Level2.2</a>
<ul class="dropdown-menu">
<li>
<a href="#">Level3.1</a>
<a href="#">Level3.2</a>
</li>
</ul>
</li>
</ul>
</li><li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">OtherLink</a>
<ul class="dropdown-menu">
<li class="menu-item ">
<a href="#">Link1</a>
<a href="#">Link2</a>
</li>
</ul>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Email</li>
<li class="menu-item ">
<a href="#">Yahoo</a>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Phone</li>
<li class="menu-item ">
<a href="#">CallNow</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="menu-item dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop Down<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
<ul class="dropdown-menu">
<li class="menu-item ">
<a href="#">Link 1</a>
</li>
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a>
<ul class="dropdown-menu">
<li>
<a href="#">Link 3</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="menu-item dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop Down<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
<ul class="dropdown-menu">
<li class="menu-item ">
<a href="#">Link 1</a>
</li>
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a>
<ul class="dropdown-menu">
<li>
<a href="#">Link 3</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!--/.nav-collapse -->
和CSS：
/*custom for submenu here*/
.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: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:#cccccc;
margin-top:5px;
margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
border-left-color:#ffffff;
}
.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;
}
@media only screen and (max-width:767px){
.dropdown-submenu{
display: block;
position: static;
background-color:transparent;
border:0 none;
box-shadow:none;
margin-top:0;
width:100%;
}
.navbar-nav .dropdown-menu > li > a,
.navbar-nav .dropdown-menu .dropdown-header {
padding:5px 15px 5px 25px;
}
.navbar-nav .dropdown-menu > li > a{
line-height:20px;
}
.navbar-default .navbar-nav .dropdown-menu > li > a{
color:#777;
}
.navbar-nav .dropdown-menu .dropdown-submenu > a{
display:block;
margin-top: 0;
}
}
答案 0 :(得分：2)
将您的CSS改为此
@media only screen and (min-width:768px){
.dropdown-submenu:hover>.dropdown-menu {
display:block;
}
}
还将此脚本添加到页面。
$(document).ready(function(){
$('.dropdown-submenu a').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
此处已更新bootply。希望这会对你有所帮助。