首先,确定导航栏的父类为bui-side-menu,各需要显示和隐藏的列表按child1(前面child,后面数字命名),并为点击的父级列表添加属性data-submenu='1';给a标签添加active类样式。
接着,写jQuery。
示例:
html代码:
<ul class="bui-side-menu bui-menu" style="height: 100%;" >
<li class="bui-menu-item menu-second">
<div class="bui-menu-title">
<a data-submenu="1" href="javascript:void(0);">
<span class="bui-menu-title-text">父列表</span>
</a>
</div>
<ul id="child1" class="bui-menu" style="display:none">
<li class="bui-menu-item menu-leaf">
<a href="http://localhost/AppAdmin/index.php?m=UserData&act=newAddShow&timeStart&timeEnd&dateType"><em>子列表</em></a>
</li>
</ul>
</li>
</ul>
jQuery代码:
$(function(){
// 左边导航栏
var menu = $('.bui-side-menu').on('click' ,'a' ,function(){
menu.find('a').removeClass('active')
var submenu = $(this).data('submenu');
if(submenu){
submenu = $('#child'+submenu);
if(submenu.is(':hidden')){
submenu.show();
$(this).addClass('active')
}else{
submenu.hide();
//$(this).removeClass('active');
}
}else{
$(this).addClass('active');
}
});
})