无限级下拉菜单
Posted duguangyan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了无限级下拉菜单相关的知识，希望对你有一定的参考价值。
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<style type="text/css">
.dropMenu li{ cursor: pointer; list-style:none;position: relative;}
.menuClose,.menuOpen,.menuLast{display: block; width: 14px; height: 14px;background: url(zTreeStandard.png) 48px 0px; position: absolute;left: -22px;top: 4px;}
.menuOpen{background-position-y: -16px;}
.menuLast{background-position-y: -32px;}
</style>
</head>
<body>
<div class="dropMenu"></div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
//下拉菜单数据结构
var myJson = [
{
isparent:true,
name:‘一级菜单‘,
items:[
{isparent:true,name:‘二级菜单‘,items:[{isparent:false,name:‘三级菜单‘}]},
{isparent:true,name:‘二级菜单‘,items:[{isparent:false,name:‘三级菜单‘}]}
]
},
{
isparent:true,
name:‘一级菜单‘,
items:[
{
isparent:true,name:‘二级菜单‘,items:[{isparent:true,name:‘三级菜单‘,items:[
{isparent:false,name:‘四级菜单‘,url:‘www.baidu.com‘},
{isparent:false,name:‘四级菜单‘,url:‘www.baidu.com‘}
]}]},
{isparent:true,name:‘二级菜单‘,items:[{isparent:false,name:‘三级菜单‘}]}
]
}
];
//下拉菜单对象
var dropMenu = {
createDom:function(data){
var ul = $("<ul></ul>");
if(data != undefined){
for(var i=0;i<data.length;i++){
if(data[i].isparent){
var li = $("<li data=‘0‘><i class=‘menuClose‘></i></li>");
li.append(data[i].name);
li.append(dropMenu.createDom(data[i].items));
}else{
var li = $("<li data=‘3‘><i class=‘menuLast‘></i></li>");
li.append("<a href=http://"+data[i].url+">"+data[i].name+"</a>");
li.append(dropMenu.createDom(data[i].items));
}
ul.append(li);
}
}
return ul;
},
init:function(el,data){
dropMenu.createDom(data);
el.append(dropMenu.createDom(myJson));
var dom = "ul";
for(var i=1;i<10;i++){
dom+=">li>ul";
if(i%2){
el.find(dom).hide();
}else{
el.find(dom).show();
}
}
el.find("ul li").click(function(e){
e.stopPropagation();
if($(this).attr("data")==0||$(this).attr("data")==1){
if($(this).attr("data")==0){
$(this).find(">i").addClass("menuOpen").removeClass("menuClose");
$(this).attr("data",1);
}else{
$(this).find(">i").addClass("menuClose").removeClass("menuOpen");
$(this).attr("data",0);
}
$(this).find("ul").toggle();
}
})
}
}
//初始化下拉菜单
dropMenu.init($(".dropMenu"),myJson);
</script>
</html>
以上是关于无限级下拉菜单的主要内容，如果未能解决你的问题，请参考以下文章
用div+css做下拉菜单，当鼠标移向2级菜单时，为啥1级菜单的a:hover背景色就不管用了？
解决element生成的下拉菜单，不在父级之下，而是在body之下，通过父级控制该下拉菜单的样式，达到不跟别的地方冲突的目的