您的位置：首页 > Web前端 > JQuery

二级菜单 增加 删除 修改 jquery

2017-10-07 21:08 417 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding:0;
margin:0;
}
.head-menu{
width:100%;
height:50px;
background: #f38;
font-size: 20px;
text-align: right;
line-height:50px;
}
.body-menu{
width:200px;
background: orange;
float: left;
}
.body-menu div{
border-bottom: 1px solid gray;
}
.body-menu div span{
text-align: center;
height:30px;
width:200px;
line-height:30px;
display: inline-block;
background: brown;
border-bottom: 1px solid gray;
}
.body-menu div ul li{
width:200px;
height:25px;
line-height:25px;
border-bottom: 1px solid gray;
text-align: center;

}
.body-menu div ul .current{
background: rgba(0,0,0,.2);
}
button{
float: left;
display: block;
width:70px;
margin:0 10px;
height:20px;
}
.hide{
position: fixed;
left:0;
top:0;
right:0;
bottom: 0;
background: rgba(0,0,0,.3);
display: none;
}
.tan{
position: absolute;
left:50%;
top:50%;
width:400px;
height:200px;
z-index: 5;
background: #fff;
margin-left:-200px;
margin-top:-200<
10ba5
span style="color:#ca9e4d;">px;
text-align: center;
vertical-align: middle;
padding-top:100px;
}
.submit{
display: inline-block;
position: absolute;
left:50%;
top:50%;
}
.q-add{

position: absolute;
left:50%;
top:50%;
display: none;
}
</style>
</head>
<body>
<div class="head-menu">
主菜单
</div>
<div class="body-menu">
<div>
<span>菜单一</span>
<ul>
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
</ul>
</div>
<div>
<span>菜单二</span>
<ul>
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
</ul>
</div>
<div>
<span>菜单三</span>
<ul>
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
</ul>
</div>
</div>
<button type="button" class="add">增加</button>
<button type="button" class="del">删除</button>
<button type="button" class="revise">修改</button>
<div class="hide">
<div class="tan">
<span>确认编辑</span><input class="content" type="text">
<button type="button" class="submit">提交修改</button>
<button type="button" class="q-add">确认增加</button>
</div>
</div>

</body>
<script src="jquery/jquery.js"></script>
<script>
$(function() {
$('.body-menu div span').on('click',function () {
$(this).next().slideToggle();
});
var obj=null;
$('.body-menu div ul').on('click','li',function(){
$('.body-menu div ul li').removeClass('current');
$(this).addClass('current');
obj=$(this);
$('.add').on('click',function () {
$('.hide').show();
$('.q-add').show();
$('.submit').hide();
});
$('.revise').on('click',function () {
$('.hide').show();
$('.content').val(obj.text());
$('.q-add').hide();
$('.submit').show();
});
});
$('.submit').on('click',function () {
obj.text($('.content').val());
$('.hide').hide();
});
$('.q-add').on('click',function(){
var str='';
var n=$('.content').val();
str+='<li>'+n+'</li>';
obj.parent().append(str);
str='';
$('.hide').hide();
});
$('.del').on('click',function () {
if(confirm('确定删除'))
$('.body-menu div ul .current').hide();
});

});
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航