[英]Jquery Drop Down Menu. The sub menu disappears when clicked. So, How to make the submenu stays when clicked?
單擊菜單(成員)時,我正在使用jquery顯示子菜單。 當我單擊“成員”菜單時,切換開關起作用,問題是,當我單擊子菜單時,它會消失,因此我希望它在單擊時保持不變。 如何在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
:
$(".has-sub ul").click(function(e){
e.stopPropagation();
});
從li向ul添加一個sub
類
嘗試:
<div id="container">
<nav>
<ul>
<li><a href="#">Walk-In</a>
</li>
<li class="has-sub"><a href="#">Members</a>
<ul class="sub">
<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>
$('.has-sub').click(function(e){
if ($(e.target).parents('.sub').length == 0 ){
$(this).toggleClass('tap');
}
});
jsfiddle: https ://jsfiddle.net/v9ynq7og/
嘗試這個。 我已將ID添加到主菜單中,同時單擊以檢查目標ID,並在此基礎上執行適當的操作
$(document).ready(function(e) { $('.has-sub').click(function(e) { if (e.target.id) $(this).toggleClass('tap') }); });
@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 !important; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> <title>Dashboard</title> <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="#" id='id1'>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>
我想您正在尋找...
$(document).ready(function(e) { $('.test').click(function(e){ if($(this).hasClass("test1")) { e.stopPropagation(); }else { $(this).toggleClass('tap'); } }); });
**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; }
<html> <head> <title>Dashboard</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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 test"><a href="#">Members</a> <ul> <li><a href="#" class='test test1'>Subscr</a></li> <li><a href="#" class='test test1'>asdasd</a></li> <li><a href="#" class='test test1'>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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.