导航栏操作——显示和隐藏列表并添加样式

首先，确定导航栏的父类为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');
		}

	});
})