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

来源：互联网发布：武力收复台湾知乎编辑：程序博客网时间：2024/06/14 06:01

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

0 0