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