<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body,div,p,h2,h3{
margin:0;
padding:0;
}
.menu{
100%;
height:50px;
background:pink;
}
div{
200px;
text-align:center;
}
h2{
height:40px;
background:greenyellow;
border:1px solid white;
line-height:40px;
}
p{
height:30px;
background:yellowgreen;
line-height:30px;
border:1px solid #999;
}
.div h2+div{
200px;
display:none;
margin:0 auto;
}
.div{
200px;
height:800px;
background:#99FFFF;
}
.bnt{
height:50px;
1400px;
background:#66FFCC;
position:absolute;
top:50px;
left:200px;
}
button{
80px;
height:40px;
margin-top:5px;
float:left;
margin-left:10px;
}
a{
text-decoration:none;
}
.but2{
height:300px;
300px;
border:1px solid gray;
position:absolute;
left:400px;;
top:300px;
display:none;
}
input{
height:30px;
200px;
margin-top:40px;
}
.but2 button{
margin:40px 120px;
}
h3{
height:20px;
20px;
background:#999;
margin-left:280px;
}
</style>
</head>
<body>
<div class="menu"></div>
<div class="div">
<div>
<h2>回锅肉</h2>
<div>
<a href="#" dataUrl=''><p>菜单1</p></a>
<a href="#" dataUrl=''><p>菜单2</p></a>
<a href="#" dataUrl=''><p>菜单3</p></a>
</div>
</div>
<div>
<h2>红烧肉</h2>
<div>
<a href="#" dataUrl=''><p>菜单1</p></a>
<a href="#" dataUrl=''><p>菜单2</p></a>
<a href="#" dataUrl=''><p>菜单3</p></a>
</div>
</div>
<div>
<h2>坨子肉</h2>
<div>
<a href="#" dataUrl=''><p>菜单1</p></a>
<a href="#" dataUrl=''><p>菜单2</p></a>
<a href="#" dataUrl=''><p>菜单3</p></a>
</div>
</div>
<div>
<h2>卤肉面</h2>
<div>
<a href="#" dataUrl=''><p>菜单1</p></a>
<a href="#" dataUrl=''><p>菜单2</p></a>
<a href="#" dataUrl=''><p>菜单3</p></a>
</div>
</div>
<div>
<h2>咸烧白</h2>
<div>
<a href="#" dataUrl=''><p>菜单1</p></a>
<a href="#" dataUrl=''><p>菜单2</p></a>
<a href="#" dataUrl=''><p>菜单3</p></a>
</div>
</div>
</div>
<div class="bnt">
<button type="button" id="but">删除</button>
<button type="button" id="but1">修改</button>
<button type="button" id="but2">添加</button>
</div>
<div class="but2">
<h3>X</h3>
<label for="#">菜单：<input type="text" id="cd"/></label><br/>
<label for="#">路径：<input type="text" id="lj"/></label> <br/>
<button type="button" id="but3">确认修改</button>
<button type="button" id="but4">确认添加</button>
</div>
</body>
<script src="modules/jquery.min.js"></script>
<script>
var n,c,m;
$(function(){
$('h2').on('click',function(){//点击一级菜单可添加二级菜单
n=$(this) ;//储存点击的这个h2
$(this).next().slideToggle();//h2下面这个兄弟淡入淡出相互切换
$(this).parent().siblings().children('div').slideUp();//点击这个h2的父元素的其他兄弟的div娃不显示出来
$("#but2").on('click',function(){//添加按钮，出现添加框
$('input').val(null);//添加时的输入框的value值为空
$('.but2').css('display','block');//添加框显示
$('#but3').css('display','none');//确认修改按钮隐藏
$('#but4').css('display','block');//确认添加按钮显示
})
})
$("#but4").on('click',function(){//确认添加
c=$('#cd').val();//储存添加的value值
$('.but2').css('display','none');//添加框隐藏
var p='<a href="#" dataUrl="">';//添加a标签节点
p+='<p>'+c+'</p>';
p+='</a>';
if(c==""){
alert("内容不能为空");
return;
}
n.nextAll().append(p);
// p=null;
$('#cd').val(null);
n.next().slideDown();
})
$('.div h2+div').on('click','p',function(){//点击 二级菜单删除
m=$(this);
$('#but').on('click',function(){//删除按钮
m.remove();
})
$('#but1').on('click',function(){//修改
$('#but3').css('display','block');
$('.but2').css('display','block');
$('#but4').css('display','none');
$('#cd').val(m.text());
})
$("#but3").on('click',function(){//确认修改
$('.but2').css('display','none');
m.text($('#cd').val());
})
})
$('h3').on('click',function(){//点击X消失
$('.but2').css('display','none');
})
})
</script>
</html>