okweex后台jquery后台原生简洁二级菜单

发表于： 2017年3月3日 2018年7月26日
分类：未分类

效果展示

<ul id="ula">
    <li><a id="first" href="{$dashboardurl}">okweex控制台</a></li>
    <li><a><span class="icon_house_alt fonts2" aria-hidden="true"></span>基本</a>
    <ul id="ulb" style=" display:none;">
        <li><a href="/">基本设置</a></li>
        </ul>
    </li>
       
    <li><a><span class="icon_document_alt fonts2" aria-hidden="true"></span>文章</a>
        <ul id="ulb" style=" display:none;">
        <li><a href="/">文章列表</a></li>
        <li><a href="/}">写文章</a></li>
        <li><a href="/">分类目录</a></li></ul>
    </li>
<ul>

Jquery 同时为了保证刷新的时候也展开需要用程序如PHP做一个变量识别是在第几个同时自动展开

//捕捉一级菜单下拉
$('ul#ula > li > a').not($('ul#ula li a:first')).click(function(){
		//alert($(this).html());
		var next=$(this).next(); //识别A后面的元素 也就是#ulb
		if(next.attr('id')=='ulb'){ //如果子元素存在
		
		//alert($('ul#ula > li > a').length-1);
		for(var k=0;k<$('ul#ula > li > a').length-1;k++){
			$('ul#ula > li > a').eq(k+1).next().slideUp('fast');
			$('ul#ula > li > a').eq(k+1).removeClass('hover');
				}
		
			if(next.css('display')=='none'){
				$(this).addClass('hover');
				next.slideDown('fast');
				}else{
				$(this).removeClass('hover');
				next.slideUp('fast');
					}	
					
	
			}
				})									
//自动读取是否下拉并选中
function selectnav(){
	if(navSelectNo==0){
		return false;
	}else{
	var navli = $('ul#ulb > li');  //读取全部子菜单
	//ja var = 'navSelectNo' is select number
	var navlia = navli.eq(navSelectNo-1).children().eq(0); //选中的A元素
	navlia.addClass('hoverchild'); //选中样式class=hoverchild
	var parul=navlia.parent().parent().parent(); //parent li
	parul.children().eq(0).addClass('hover'); //追加hover
	parul.children().eq(1).show(); //show()
	}
	
	
	
	
	
	
}
selectnav(); //AUTO ONCE

admin

1014