本文介绍了jQuery下拉菜单.单击后，子菜单消失.那么，如何使子菜单在单击时保持不变?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
单击菜单(成员)时，我正在使用jquery显示子菜单.当我单击成员"菜单时，该切换器起作用了，问题是，当我单击子菜单时，它会消失，因此我希望它在单击时保持不变.如何在javascript中做到这一点?...
I'm Using jquery to show the submenu when menu(members)clicked. The toggle works when I click the Member menu and the problem is, when I click the submenu it will disappear, so I want it to stay when clicked. How to do that in javascript?...
<html>
<head>
<title>Dashboard</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e)
{
$('.has-sub').click(function(){
$(this).toggleClass('tap')
});
});
</script>
</head>
<body>
<header>
<div class="logo"><a href="#">WORKOUT <span>FITNESS CENTER</span></a></div>
</header>
<div id="container">
<nav>
<ul>
<li><a href="#">Walk-In</a></li>
<li class="has-sub"><a href="#">Members</a>
<ul>
<li><a href="#">Subscr</a></li>
<li><a href="#">asdasd</a></li>
<li><a href="#">asdasd</a></li>
</ul>
</li>
<li><a href="#">Sales</a></li>
<li><a href="#">Inventory</a></li>
<li><a href="#">Suppliers</a></li>
<li><a href="#">Reports</a></li>
</ul>
</nav>
<div id="content">
SOME CONTENT YAY
</div>
</div>
</body>
</html>
CSS
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300italic,300);
*{
margin: 0;
padding: 0;
}
body {
font-family: 'Open Sans';
}
a{
text-decoration: none;
}
header{
width: 100%;
height: 50px;
border-bottom: 1px solid #858585;
}
.logo {
float: left;
margin-top: 9px;
margin-left: 15px;
}
.logo a{
font-size: 1.3em;
color: #070807;
}
.logo a span{
font-weight: 300;
color: #1AC93A;
}
nav{
width: 250px;
height: calc(100% - 50px);
background-color: #171717;
float: left;
}
#content {
width: :auto;
margin-left: 250px;
height: calc(100% - 50px);
padding: 15px
}
nav li{
list-style: none;
}
nav li a{
color: #ccc;
display: block;
padding: 10px;
font-size: 0.8em;
border-bottom: 1px solid #0a0a0a;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
nav li a:hover{
background-color: #030303;
color: #fff;
padding-left: 80px;
}
nav ul li ul {
display: none;
}
/*nav ul li:hover > ul{
display: block;
}*/
nav ul li.tap > ul{
display: block;
}
推荐答案
这是因为子级事件在单击时会冒泡到父级，要停止此操作，请向子级元素添加click事件，并调用e.stopPropagation()以防止冒泡直到父母是.has-sub:
This is because the events on child bubble up to the parent when clicked, to stop this add a click event to the child element and call e.stopPropagation() to prevent bubbling up to the parent being .has-sub:
$(".has-sub ul").click(function(e){
e.stopPropagation();
});
这篇关于jQuery下拉菜单.单击后，子菜单消失.那么，如何使子菜单在单击时保持不变?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！