新鲜出炉的树形菜单 包括增删改功能 有子菜单时标记，子菜单的收起与展开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.menulevelzero{display:inline-block;width:200px;height:30px;border: 1px solid black;text-align: center;line-height: 30px;font-size: 16px;}
.menulevelzero_input{width:198px;height:26px;display: none;}
.addbox{width:100px;height:69px;background-color: grey;display:none}
.addbox_list{color:black;border:1px solid black;}
.addbox_last,.addbox_first{height:46px;width:100px;background-color: grey;display:none}
button{display:inline-block;top:20px;left:200px; width:22px;}
</style>
</head>
<body>
<button class="menulevelzero_0" aaa>-</button><input class="menulevelzero_input" type="text" name="" id="" value="" /><div class="menulevelzero" id="menulevelzero_0">总菜单</div>
<div class="menulevelzero_box">
</div>
<div class="addbox">
<div class="addbox_list addbox_add">添加</div>
<div class="addbox_list addbox_chg">修改</div>
<div class="addbox_list addbox_del">删除</div>
</div>
<div class="addbox_first">
<div class="addbox_list addbox_add">添加</div>
<div class="addbox_list addbox_chg">修改</div>
<div></div>
</div>
<div class="addbox_last">
<div class="addbox_list addbox_chg">修改</div>
<div class="addbox_list addbox_del">删除</div>
</div>
</body>
<script type="text/javascript">
var count=0;
var menuid;
var classname;
var parent;
// addbox文本框的定位
function addboxposition(){
var e = event || window.event;
$(".addbox").css({"display":"inline-block",
"position":"absolute",
})
function getviewheight(){
return document.documentElement.clientHeight || document.body.clientHeight ;
}
function getviewwidth(){
return document.documentElement.clientWidth || document.body.clientWidth ;
}
if(e.clientX<=getviewwidth()-100){
$(".addbox").css("left",e.clientX);
}else{
$(".addbox").css("left",(e.clientX-100));
}
if(e.clientY<=getviewheight()-69){
$(".addbox").css("top",e.clientY);
}else{
$(".addbox").css("top",(e.clientY-69));
}
$(".addbox_last").css("display","none");
$(".addbox_first").css("display","none");
}
// 总菜单addbox文本框展示
function addboxpositionfirst(){
var e = event || window.event;
$(".addbox_first").css({"display":"inline-block",
"position":"absolute",
})
function getviewheight(){
return document.documentElement.clientHeight || document.body.clientHeight ;
}
function getviewwidth(){
return document.documentElement.clientWidth || document.body.clientWidth ;
}
if(e.clientX<=getviewwidth()-100){
$(".addbox_first").css("left",e.clientX);
}else{
$(".addbox_first").css("left",(e.clientX-100));
}
if(e.clientY<=getviewheight()-46){
$(".addbox_first").css("top",e.clientY);
}else{
$(".addbox_first").css("top",(e.clientY-46));
}
$(".addbox").css("display","none");
$(".addbox_last").css("display","none");
}
// 四级菜单addbox文本框展示
$(".menulevelzero_box").on("contextmenu",".menulevelfourth",function(e){return false;}).on("mousedown",".menulevelfourth", function addmenulevelfourth(event, a){
if(event.which == 3 || a == 'right'){
menuid=$(this).attr("id");
addboxpositionlast();
}
})
function addboxpositionlast(){
var e = event || window.event;
$(".addbox_last").css({"display":"inline-block",
"position":"absolute",
})
function getviewheight(){
return document.documentElement.clientHeight || document.body.clientHeight ;
}
function getviewwidth(){
return document.documentElement.clientWidth || document.body.clientWidth ;
}
if(e.clientX<=getviewwidth()-100){
$(".addbox_last").css("left",e.clientX);
}else{
$(".addbox_last").css("left",(e.clientX-100));
}
if(e.clientY<=getviewheight()-46){
$(".addbox_last").css("top",e.clientY);
}else{
$(".addbox_last").css("top",(e.clientY-46));
}
$(".addbox").css("display","none");
$(".addbox_first").css("display","none");
}
// addbox 右键事件的阻止
$(".addbox").on("contextmenu",function(e){return false;});
$(".addbox_first").on("contextmenu",function(e){return false;});
$(".addbox_last").on("contextmenu",function(e){return false;});
// 点击全屏隐藏 addbox事件
$("body").on("click",function boxhide(){
$(".addbox").css("display","none");
$(".addbox_last").css("display","none");
$(".addbox_first").css("display","none");
})
// addbox_add 添加功能
//添加一级菜单
//右键事件的阻止与新的右键事件的设置
$(".menulevelzero").on("contextmenu",function(e){return false;}).on("mousedown", function addmenulevelfirst(event, a){
if(event.which == 3 || a == 'right'){
menuid=$(this).attr("id"); //获取所点击DIV的id
addboxpositionfirst();
}
}).on("click",function (){
$(".menulevelzero_box").toggle();
})
// .on("click",function addmenulevelfirst(){
// var html=$(".menulevelzero_box").html();
// html+='<div class="menulevelfirst" id="menulevelfirst'+a+'">一级菜单</div><div class="menulevelfirst_box'+a+'"></div>';
// $(".menulevelzero_box").html(html);
// $(".menulevelfirst").css({"width":"200px","height":"25px",
// "border":"1px solid black",
// "text-align": "center","line-height": "25px",
// "font-size": "16px"})
// a++;
// })
//添加二级菜单
//右键事件的阻止与新的右键事件的设置
$(".menulevelzero_box").on("contextmenu",".menulevelfirst",function(e){return false;}).on("mousedown",".menulevelfirst", function addmenulevelsecond(event, a){
if(event.which == 3 || a == 'right'){
menuid=$(this).attr("id");
// var html=$("#"+firstid).next().html();
// html+='<div class="menulevelsecond" id="menulevelsecond'+b+'">二级菜单</div><div class="menulevelsecond_box'+b+'"></div>';
// $("#"+firstid).next().html(html); //jq选择器的神奇用法！！！！在添加中都有体现！！！
// b++;
addboxposition();
}
}).on("click",".menulevelfirst",function firsttoggle(){ //菜单的点击收起点击释放
$(this).next().toggle();
})
//添加三级菜单
$(".menulevelzero_box").on("contextmenu",".menulevelsecond",function(e){return false;}).on("mousedown",".menulevelsecond", function addmenulevelthird(event, a){
if(event.which == 3 || a == 'right'){
menuid=$(this).attr("id");
addboxposition();
}
}).on("click",".menulevelsecond",function secondtoggle(){
$(this).next().toggle();
})
// .on("click",".menulevelsecond", function addmenulevelthird(){
//
// var secondid=$(this).attr("id");
// var html=$("#"+secondid).next().html();
// html+='<div class="menulevelthird" id="menulevelthird'+c+'">三级菜单</div><div class="menulevelthird_box'+c+'"></div>';
// $("#"+secondid).next().html(html);
// c++;
// })
//添加四级菜单
$(".menulevelzero_box").on("contextmenu",".menulevelthird",function(e){return false;}).on("mousedown",".menulevelthird", function addmenulevelfourth(event, a){
if(event.which == 3 || a == 'right'){
menuid=$(this).attr("id");
addboxposition();
}
}).on("click",".menulevelthird",function thirdtoggle(){
$(this).next().toggle();
})
// .on("click",".menulevelthird", function addmenulevelfourth(){
//
// var thirdid=$(this).attr("id");
// var html=$("#"+thirdid).next().html();
// html+='<div class="menulevelfourth" id="menulevelfourth'+d+'">四级菜单</div><div class="menulevelfourth_box'+d+'"></div>';
// $("#"+thirdid).next().html(html);
// d++;
// })
// 增加一个隐藏input框 增加一个button按钮
$(".addbox_add").on("click",function addmenu(){
var html=$("#"+menuid).next().html();
classname=$("#"+menuid).next().attr('class'); //获取下一个div元素类名
// console.log("aaa");
// console.log(typeof classname);
// console.log(classname);
if (classname.indexOf('menulevelzero') == 0){
html+='<button class="menulevelfirst'+count+'" aaa>-</button><input class="menu_input menulevelfirst_input'+count+'" type="text" /><div class="menulevelfirst" id="menulevelfirst'+count+'">一级菜单</div><div class="menulevelfirst_box'+count+'"></div><div bbb></div>';
$("#"+menuid).next().html(html);
} else if (classname.indexOf('menulevelfirst') == 0) {
html+='<button class="menulevelsecond'+count+'" aaa>-</button><input class="menu_input menulevelsecond_input'+count+'" type="text" /><div class="menulevelsecond" id="menulevelsecond'+count+'">二级菜单</div><div class="menulevelsecond_box'+count+'"></div><div bbb></div>';
$("#"+menuid).next().html(html);
} else if (classname.indexOf('menulevelsecond') == 0){
html+='<button class="menulevelthird'+count+'" aaa>-</button><input class="menu_input menulevelthird_input'+count+'" type="text" /><div class="menulevelthird" id="menulevelthird'+count+'">三级菜单</div><div class="menulevelthird_box'+count+'"></div><div bbb></div>';
$("#"+menuid).next().html(html);
} else if (classname.indexOf('menulevelthird') == 0){
html+='<button class="menulevelfourth'+count+'" aaa>-</button><input class="menu_input menulevelfourth_input'+count+'" type="text" /><div class="menulevelfourth" id="menulevelfourth'+count+'">四级菜单</div><div class="menulevelfourth_box'+count+'"></div><div bbb></div>';
$("#"+menuid).next().html(html);
};
$("#"+menuid).next().html(html); //jq选择器的神奇用法！！！！在添加中都有体现！！！
count++;
$(".menulevelfirst").css({"display":"inline-block","width":"200px","height":"25px",
"border":"1px solid black",
"text-align": "center","line-height": "25px",
"font-size": "16px","background-color": "#fff"})
$(".menulevelsecond").css({"display":"inline-block","width":"200px","height":"25px",
"border":"1px solid black",
"text-align": "center","line-height": "25px",
"font-size": "16px","background-color": "#ccc"})
$(".menulevelthird").css({"display":"inline-block","width":"200px","height":"25px",
"border":"1px solid black",
"text-align": "center","line-height": "25px",
"font-size": "16px","background-color": "#999"})
$(".menulevelfourth").css({"display":"inline-block","width":"200px","height":"25px",
"border":"1px solid black",
"text-align": "center","line-height": "25px",
"font-size": "16px","background-color": "#666"})
$(".menu_input").css({"width":"198px","height":"21px",
"display": "none"})
$("button").css({"display":"inline-block","top":"20px","left":"200px","width":"22px"})
})
// addbox_chg 修改功能
var str;
$(".addbox_chg").on("click",function chgmenu(){
$("#"+menuid).css("display","none");
$("#"+menuid).prev().css("display","inline-block");
str = $("#"+menuid).html();
$("#"+menuid).prev().val(str);
});
$(".menulevelzero_box").on("blur","input[type=text]",function(){
$("#"+menuid).css("display","inline-block");
$("#"+menuid).prev().css("display","none");
var str1 = $("#"+menuid).prev().val().trim();
if (str1 != "") {
$("#"+menuid).html(str1);
} else{
$("#"+menuid).html(str);
}
})
$(".menulevelzero_input").on("blur",function(){
$("#menulevelzero_0").css("display","inline-block");
$(this).css("display","none");
var str1 = $(this).val().trim();
if (str1 != "") {
$("#menulevelzero_0").html(str1);
} else{
$("#menulevelzero_0").html(str);
}
})
// addbox_del 删除功能 用各种奇特的选择器把相关的所有都删掉
$(".addbox_del").on("click",function delmenu(){
parent=$("#"+menuid).parent();
$("#"+menuid).prev().remove();
$("#"+menuid).next().remove();
$("#"+menuid).next("[bbb]").remove();
$("."+menuid+"[aaa]").remove();
$("#"+menuid).remove(); //这里有一个问题，有关remove()事件执行，
// 是不是因为事件是绑定在$("#"+menuid)之上的,$("#"+menuid).next().remove();放在$("#"+menuid).remove();后面时不能执行
menuid=parent.prev().attr('id');
})
// 待添加功能:图标表示其下有无子菜单
$(".addbox_add").on("click",function (){
var html=$("#"+menuid).next().html().trim();
if (html != '') {
$("."+menuid+"[aaa]").html('+');
} else{
$("."+menuid+"[aaa]").html('-')
}
});
$(".addbox_del").on("click",function (){
var html=parent.html();
if (html != '') {
$("."+menuid+"[aaa]").html('+');
} else{
$("."+menuid+"[aaa]").html('-')
}
var html1=$("."+menuid+"[aaa]").html();
console.log(111);
console.log(html1);
});
</script>
</html>
以上，样式未调，代码有重复利用，具体功能有分模块，功能可实现
唯一引入的文件只是jq而已
用到很多不熟悉的东西，有时间的话可能会进一步做整理
后期可能会改进
浙公网安备 33010602011771号