无限级下拉菜单

<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>

时间： 2024-10-20 14:51:26

无限级下拉菜单

无限级下拉菜单的相关文章

HTML+JS+CSS 实现下拉菜单

用HTML和CSS实现的下拉菜单

boostrapt的二级下拉菜单

Bootstrap下拉菜单

bootstrap-按钮的向下向上三角形-向上弹起的下拉菜单

bootstrap-导航加下拉菜单（二级导航）

bootstrap(4)关于下拉菜单的功能

分别用js 和 html/css实现下拉菜单特效

Siebel 找字段、下拉菜单设置值、弹出新页面、弹出选择框、设置默认值、按钮代码