二级菜单的HTML代码如下:
<!-- // left menu begin -->
<div class="main-left">
<div class="main-left-menu">
<h1><a href="/bmpf/home/" target="_self" class="main-left-menu-link"><span class="icon wb-desktop" aria-hidden="true"></span> 系统状态</a></h1>
<h1><a href="/bmpf/usermng/" target="_self" class="main-left-menu-link"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> 用户管理</a></h1>
<h1><a href="#"><span class="glyphicon glyphicon-yen" aria-hidden="true"></span> 资产管理 <span class="glyphicon glyphicon-menu-right main-left-menu-right" aria-hidden="true"></span></a></h1>
<ul class="main-left-menu-ul" style="display: none">
<li><a href="./host.html" target="_self" class="main-left-menu-link">主机管理</a></li>
<li><a href="./mobile-disk.html" target="_self" class="main-left-menu-link">移动介质管理</a></li>
</ul>
<h1><a href="#"><span class="glyphicon glyphicon-th-large" aria-hidden="true"></span> 软件管理 <span class="glyphicon glyphicon-menu-right main-left-menu-right" aria-hidden="true"></span></a></h1>
<ul class="main-left-menu-ul" style="display: none">
<li><a href="/bmpf/softmng/software_name/" target="_self" class="main-left-menu-link">软件添加</a></li>
<li><a href="/bmpf/softmng/" target="_self" class="main-left-menu-link">软件包管理</a></li>
<li><a href="/bmpf/softmng/software_policy/" target="_self" class="main-left-menu-link">软件分发策略</a></li>
</ul>
<h1><a href="./cascade.html" target="_self" class="main-left-menu-link"><span class="glyphicon glyphicon-link" aria-hidden="true"></span> 级联管理</a></h1>
<h1><a href="#"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 策略管理 <span class="glyphicon glyphicon-menu-right main-left-menu-right" aria-hidden="true"></span></a></h1>
<ul class="main-left-menu-ul" style="display: none">
<li><a href="./user-strategy.html" target="_self" class="main-left-menu-link">用户认证策略</a></li>
<li><a href="./send-message-strategy.html" target="_self" class="main-left-menu-link">发送消息策略</a></li>
<li><a href="./mobile-disk-strategy.html" target="_self" class="main-left-menu-link">移动介质策略</a></li>
</ul>
<h1><a href="/bmpf/audit/" target="_self" class="main-left-menu-link"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> 日志管理</a></h1>
<h1><a href="#"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span> 系统管理 <span class="glyphicon glyphicon-menu-right main-left-menu-right" aria-hidden="true"></span></a></h1>
<ul class="main-left-menu-ul" style="display: none">
<li><a href="./sub-system.html" target="_self" class="main-left-menu-link">子系统配置</a></li>
<li><a href="./secret-degree.html" target="_self" class="main-left-menu-link">密级配置</a></li>
<!-- <li><a href="./warning.html" target="pan-iframe" class="main-left-menu-link">告警设置</a></li> -->
<li><a href="./system-config.html" target="_self" class="main-left-menu-link">系统设置</a></li>
</ul>
</div>
</div>
<!-- left menu end // -->
那如何用JavaScript控制呢?
$(function(){
/**
* 左侧菜单
*/
(function(){
var url = window.location.href;
var element = $('.main-left-menu a').filter(function() {
if(url.indexOf("#") == (url.length - 1)){
var thisHref = url.substring(0, url.length - 1);
}else{
var thisHref = url;
}
// return this.href == url || url.href.indexOf(this.href) == 0;
return this.href == thisHref;
}).parent().addClass('main-left-menu-active');
if(element.is('li')) {
element.parent().prev().find(".main-left-menu-right").removeClass("glyphicon-menu-right").addClass("glyphicon-menu-down");
element.parent().slideDown(100);
}
})();
$(".main-left-menu>h1").click(function(){
$(".main-left-menu-ul").slideUp(100);
$(".main-left-menu-right").removeClass("glyphicon-menu-down");
$(".main-left-menu-right").addClass("glyphicon-menu-right");
if($(this).next("ul").css("display") == "block"){
$(this).find(".main-left-menu-right").removeClass("glyphicon-menu-down");
$(this).find(".main-left-menu-right").addClass("glyphicon-menu-right");
$(this).next("ul").slideUp(100);
}else if($(this).next("ul").css("display") == "none"){
$(this).find(".main-left-menu-right").removeClass("glyphicon-menu-right");
$(this).find(".main-left-menu-right").addClass("glyphicon-menu-down");
$(this).next("ul").slideDown(200);
}
});
$(".main-left-menu-link").click(function(){
$(".main-left-menu-link").removeClass("main-left-menu-active");
$(this).addClass("main-left-menu-active");
});
})