二级菜单 - 爱码网

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body,div,p,h2,h3{
margin:0;
padding:0;
}
.menu{
width:100%;
height:50px;
background:pink;
}
div{
width: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{
width:200px;
display:none;
margin:0 auto;
}
.div{
width:200px;
height:800px;
background:#99FFFF;
}
.bnt{
height:50px;
width:1400px;
background:#66FFCC;
position:absolute;
top:50px;
left:200px;
}
button{
width:80px;
height:40px;
margin-top:5px;
float:left;
margin-left:10px;
}
a{
text-decoration:none;
}
.but2{
height:300px;
width:300px;
border:1px solid gray;
position:absolute;
left:400px;;
top:300px;
display:none;
}
input{
height:30px;
width:200px;
margin-top:40px;
}
.but2 button{
margin:40px 120px;
}
h3{
height:20px;
width: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>