我有这个 HTML 代码:
<div id="nav">
<li><a href="/admin/index.php" target="_top">Dashboard</a></li>
<li><a>Contacts</a>
<ul>
<li><strong>Companies</strong></li>
<li><a href="/admin/customer/addcustomer.php" target="crm_frame">Add Company</a></li>
<li><a href="/admin/customer/viewcustomer.php" target="crm_frame">View Company</a></li>
</ul>
</li>
</div>
这个JS:
<script>
$(document).ready(function () {
$('#nav > li > a').click(function(e){
if ($(this).attr('class') != 'active'){
$('#nav li ul').slideUp();
$(this).next().slideToggle();
$('#nav li a').removeClass('active');
$(this).addClass('active');
}
});
});
</script>
对于我的垂直菜单,但我不知道如何在页面更改时保持菜单状态。
例如,如果
这是CSS:
#nav {
float: left;
margin-left:5px;
margin-top:-20px;
top:0;
left:0;
width: 100%;
list-style:none;
}
#nav li a {
display: block;
padding: 8px 10px;
margin-bottom:0;
background: #666666;
border-top: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
text-decoration: none;
color: #EEEEEE;
width:155px;
}
#nav li a:hover, #nav li a.active {
background: #F36F25;
color: #FFFFFF;
cursor:pointer;
}
#nav li ul {
display: none;
list-style:none;
}
#nav li ul li {
margin-top:0;
margin-right:0;
margin-bottom:0;
margin-left:-40px;
}
#nav li ul li a {
background: #EEEEEE;
color:#666666;
border:1px solid #EEEEEE;
}
#nav li ul li a:hover {
background: #EEEEEE;
color:#f36f25;
border:1px solid #f36f25;
}