你好! 这是我的菜单! 我现在想要的是，当我单击“程序”时，我希望仍然显示下拉菜单，但不太确定该怎么做。 如果有人也知道我如何在单击下拉菜单中的链接后保留下拉菜单，那就太好了(当我被定向到另一个页面时)
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="sv">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Nösnäs</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" media="screen" href="mobilemenu.css"/>
<link rel="stylesheet" type="text/css" href="screen.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".nav-button").on('click',function () {
$(".nav-button,.nav").toggleClass("open");
});
});
</script>
</head>
<body>
<button class="nav-button">Toggle Navigation</button>
<ul class="nav">
<li><a href="#">Program</a>
<div class="second nav">
<ul>
<li><a href="#">Teknik</a></li>
<li><a href="#">Naturvetenskap</a></li>
<li><a href="#">El</a></li>
</ul></li>
</div>
<li><a href="#">Nösnäs</a></li>
<li><a href="#">Schema</a></li>
<li><a href="#">Matsal</a></li>
</ul>
<style>.xg_module_body img {margin:0!important;}</style>
<span class="bilder">
<div align="center"><table cellpadding="0" width="150" cellspacing="0"><tr>
<td><a href="#" target="_blank"><img src="facebookpic.png" title="Gilla våran Facebook sida" width="35" height="35" border="0"></a></td>
<td><a href="#"target="_blank"><img src="googlepic.png" title="Gilla oss på googlde+" width="35" height="35" border="0"></a></td>
<td><a href="#" target="_blank"><img src="twitterpic.png" title="Följ oss på Twitter" width="35" height="35" border="0"></a></td>
<td><a href="#" target=""><img src="rsspic.png" width="35" height="35" border="0" title="Följ våran RSS"></a></td>
</tr>
</table></div>
</span>
<style>.xg_module_body img {margin:0!important;}</style>
<span class="bilderna">
<div align="center"><table cellpadding="0" width="150" cellspacing="0"><tr>
<td><a href="#" target="_blank"><img src="facebookpic.png" title="Gilla våran Facebook sida" width="35" height="35" border="0"></a></td>
<td><a href="#"target="_blank"><img src="googlepic.png" title="Gilla oss på googlde+" width="35" height="35" border="0"></a></td>
<td><a href="#" target="_blank"><img src="twitterpic.png" title="Följ oss på Twitter" width="35" height="35" border="0"></a></td>
<td><a href="#" target=""><img src="rsspic.png" width="35" height="35" border="0" title="Följ våran RSS"></a></td>
</tr>
</table></div>
</span>
</body>
</html>
* { margin:0;
padding:0;
}
html {height: 100%;}
body{
position: relative;
height: 100%;
background: #fff;
}
/* Första boxarna*/
ul.nav {
list-style: none;
display: block;
width: 170px;
position: relative;
top: :0px;
left: 10px;
z-index:0;
padding: 100px 0 50px 0;
background: url(sh.png) no-repeat;
-webkit-background-size: 50% 100%;
display: list-item;
font-family: OpenSans-Regular;
font-size: 18px;
}
li {
margin: 5px 0 0 0;
}
/* När jag drar musen över */
ul.nav li a {
-webkit-transition: all 0.3s ease-out;
color: #174867;
padding: 7px 15px 7px 15px;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 5px;
display: block;
text-decoration: none;
-webkit-box-shadow: 2px 2px 4px 2px #888;
}
ul.nav li a:hover {
background: #ebebeb url(border.png) no-repeat;
color: #67a5cd;
padding: 9px 15px 7px 30px;
}
ul.nav li ul {
display:none;
}
ul.nav li:active ul {
display:block;
position:relative;
left:3px;
top:0px;
list-style: none;
z-index:999;
background: #888;
}
ul.nav li ul li
{
background:#888;
}
最佳答案
javascript
$(".program").on('click',function () {
$('li div ul').toggle('.close'); // new added
$('li div ul').show();
});
css
.close{display:none;} // new added
关于javascript - 使菜单在点击后保持不变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21254206/