tree功能目前已经很普遍了，几乎人事管理业务里都有这个功能，me做了一个基于原生+jquery实现 tree二级菜单功能，以此现在做一个笔记以便以后使用，Hope to help you.
废话不多说直接上代码
一、html代码块
<section>
<div class="page" id="page1">
<div class="workItemSelectAll" onclick="workItemSelectAll(this,'workItemSelectAll')">
<i class="icon icon-select banAction"></i><span>全选</span>
</div>
<div id="selectItems">
<div class="workItem">
<i class="icon icon-select action"></i>
<div class="demos">
<div style="width: 74%;float: left;" onclick="workItemSelectAll(this,'workItem')">
<span>一级目录<span style="color:#999;"></span></span>
</div>
<div class="subpageBox" onclick="treeItems(this)"><span class="subpageTitle">下级</span></div>
</div>
<div class="workItemSubpageBox">
<div class="workItemSubpage" onclick="workItemSelectAll(this,'workItemSubpageBox')">
<i class="icon icon-select action"></i>
<div class="demos">
<span>二级目录</span>
</div>
</div>
<div class="workItemSubpage" onclick="workItemSelectAll(this,'workItemSubpageBox')">
<i class="icon icon-select action"></i>
<div class="demos">
<span>二级目录</span>
</div>
</div>
<div class="workItemSubpage" onclick="workItemSelectAll(this,'workItemSubpageBox')">
<i class="icon icon-select action"></i>
<div class="demos">
<span>二级目录</span>
</div>
</div>
</div>
</div>
<div class="workItem">
<i class="icon icon-select"></i>
<div class="demos">
<div style="width: 74%;float: left;" onclick="workItemSelectAll(this,'workItem')">
<span>一级目录</span>
</div>
<div class="subpageBox" onclick="treeItems(this)"><span class="subpageTitle">下级</span></div>
</div>
<div class="workItemSubpageBox">
<div class="workItemSubpage" onclick="workItemSelectAll(this,'workItemSubpageBox')">
<i class="icon icon-select"></i>
<div class="demos">
<span>二级目录</span>
</div>
</div>
<div class="workItemSubpage" onclick="workItemSelectAll(this,'workItemSubpageBox')">
<i class="icon icon-select"></i>
<div class="demos">
<span>二级目录</span>
</div>
</div>
<div class="workItemSubpage" onclick="workItemSelectAll(this,'workItemSubpageBox')">
<i class="icon icon-select"></i>
<div class="demos">
<span>二级目录</span>
</div>
</div>
</div>
</div>
<div class="workItem">
<i class="icon icon-select" onclick="workItemSelectAll(this,'workItem')"></i>
<div class="demos">
<div style="width: 74%;float: left;" onclick="workItemSelectAll(this,'workItem')">
<span>一级目录</span>
</div>
<div class="subpageBox"><span class="subpageTitle">下级</span></div>
</div>
</div>
<div class="workItem">
<i class="icon icon-select" onclick="workItemSelectAll(this,'workItem')"></i>
<div class="demos">
<div style="width: 74%;float: left;" onclick="workItemSelectAll(this,'workItem')">
<span>一级目录</span>
</div>
<div class="subpageBox"><span class="subpageTitle">下级</span></div>
</div>
</div>
<div class="workItem">
<i class="icon icon-select" onclick="workItemSelectAll(this,'workItem')"></i>
<div class="demos">
<div style="width: 74%;float: left;" onclick="workItemSelectAll(this,'workItem')">
<span>一级目录</span>
</div>
<div class="subpageBox"><span class="subpageTitle">下级</span></div>
</div>
</div>
</div>
</div>
</section>
二、css样式部分
<style>
body{
overflow: hidden;
background: #7bc1e3;
}
p{
font-weight: 400;
text-align: center;
}
/*main*/
/*内容目录*/
.page{
height: auto;
overflow-y: auto;
overflow-x: hidden;
width: 50%;
margin: 20px auto;
box-shadow: 1px 3px 8px -4px;
}
.page .workItemSelectAll{
width: 100%;
padding: 10px;
background: #fff;
overflow: hidden;
margin-bottom:10px;
}
.page .workItemSelectAll i{
width: 20px;
height: 20px;
float: left;
border: 1px solid #ccc;
display: block;
margin-right: 20px;
border-radius: 10px;
box-sizing: border-box;
}
.page .workItemSelectAll span{
font-size: 16px;
}
.page .workItem{
width: 100%;
padding: 10px;
background: #fff;
overflow: hidden;
}
.page .workItem i{
width: 20px;
height: 20px;
float: left;
border: 1px solid #ccc;
display: block;
margin-top: 10px;
border-radius: 10px;
box-sizing: border-box;
}
.page .workItem .demos{
width: calc(100% - 22px - 38px);
height: 46px;
line-height: 40px;
float: left;
margin-left: 20px;
border-bottom: 1px solid #eee;
}
.workItem .demos .subpageBox{
width: 80px;
height: 30px;
line-height: 30px;
color: #1ea8ff;
float: right;
border-left: 1px solid #eee;
display: flex;
margin-top: 8px;
flex-direction: row;
justify-content: space-evenly;
}
.workItem .demos .subpageBox span{
font-size: 16px;
letter-spacing: 1px;
display: block;
}
.workItemSubpageBox{
display: none;
}
.workItemSubpage{
width: 100%;
padding: 8px 20px;
background: #fff;
overflow: hidden;
}
.page .workItemSubpage i{
width: 20px;
height: 20px;
float: left;
border: 1px solid #ccc;
display: block;
margin-top: 10px;
border-radius: 10px;
box-sizing: border-box;
}
.page .workItemSubpage .demos{
width: calc(100% - 22px - 38px);
height: 46px;
line-height: 40px;
float: left;
margin-left: 20px;
border-bottom: 1px solid #eee;
}
.page .workItemSubpage .demos .subpageBox{
width: 80px;
height: 30px;
line-height: 30px;
color: #1ea8ff;
float: right;
border-left: 1px solid #eee;
display: flex;
margin-top: 8px;
flex-direction: row;
justify-content: space-evenly;
}
.page .workItemSubpage .demos .subpageBox span{
font-size: 16px;
letter-spacing: 1px;
display: block;
}
/*全选状态*/
i.action{
background-image: url(img/icon-select.png);
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100%;
border: 0px !important;
}
/*半选中状态*/
i.banAction{
background-image: url(img/icon-banAction.png);
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100%;
border: 0px !important;
}
</style>
三、js代码
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function workItemSelectAll(val,name){
// 说明：
// workItemSelectAll(val,name)方法的两个参数分别：
// val(val是当前被点击Dom元素对象)
// name(name是区分一级目录和二级目录的点击)
// .banAction 是半选中状态
// .action 是半选中状态
var selectAll_val = $('.workItemSelectAll'); //全选的按钮元素
var selectItems = $('#selectItems'); //被全选的一级目录的父元素
var selectAll_children = selectAll_val.children('.icon-select'); //全选元素下的带.icon-select类名子元素
var selectAll_all_children = selectAll_val.parent().find('.icon-select');//被全选的一级目录的父元素所有带.icon-select类名的元素
if(!selectAll_all_children.is(".action")){
selectAll_children.removeClass('banAction');
}
//全选
if(name == "workItemSelectAll"){
console.log("全选");
$('#page1').find('.banAction').removeClass("banAction");
if(!$('.icon-select').is('.action')){
$('.icon-select').addClass('action');
}else{
$('.icon-select').removeClass('action');
}
}
//一级目录
else if(name == "workItem"){
console.log("一级目录");
var parent_val = $(val).parent().parent();
var parent_children = parent_val.children('.icon-select');
var parent_all_children = parent_val.find('.icon-select');
var show = parent_all_children.is(".action");
if(!show){
parent_children.addClass('action');
parent_all_children.addClass('action');
}else{
parent_all_children.removeClass('action');
}
if(!parent_children.is(".action")){
parent_children.removeClass('banAction');
}
//全选按钮：在操作一级目录时，判断长度icon-select和action是否一样
var selectItems_select_children1 = selectItems.find('.icon-select');
var selectItems_action_children1 = selectItems.find('.action');
if(selectItems_select_children1.length == selectItems_action_children1.length){
selectAll_children.removeClass('banAction');
selectAll_children.addClass('action');
}else if(selectItems_select_children1.length > selectItems_action_children1.length && selectItems_action_children1.length > 0){
selectAll_children.removeClass('action');
selectAll_children.addClass('banAction');
}else if(selectItems_action_children1.length == 0){
selectAll_children.removeClass('banAction');
}
}
//二级目录
else if(name == "workItemSubpageBox") {
console.log("二级目录");
//一级目录
var parent_val3 = $(val).parent().parent(); //一级目录
var parent_children3 = parent_val3.children(".icon-select"); //一级目录-第一个子集
//二级目录：
var select3 = $(val).children('.icon-select');
var show3 = select3.is(".action");
if(!show3){
select3.addClass('action');
}else{
select3.removeClass('action');
}
//一级目录：在操作一级目录时，判断长度icon-select和action是否一样
var select_parent3 = $(val).parent().find('.icon-select');
var action_parent3 = $(val).parent().find('.action');
if(select_parent3.length == action_parent3.length){
parent_children3.removeClass('banAction');
parent_children3.addClass('action');
}else if(select_parent3.length > action_parent3.length && action_parent3.length > 0){
parent_children3.addClass('banAction');
parent_children3.removeClass('action');
}else if(action_parent3.length == 0){
parent_children3.removeClass('banAction');
parent_children3.removeClass('action');
}
//全选按钮：在操作二级目录时，判断长度icon-select和action是否一样
var selectItems_select_children2 = selectItems.find('.icon-select');
var selectItems_action_children2 = selectItems.find('.action');
if(selectItems_select_children2.length == selectItems_action_children2.length){
selectAll_children.removeClass('banAction');
selectAll_children.addClass('action');
}else if(selectItems_select_children2.length > selectItems_action_children2.length && selectItems_action_children2.length > 0){
selectAll_children.removeClass('action');
selectAll_children.addClass('banAction');
}else if(selectItems_action_children2.length == 0){
selectAll_children.removeClass('banAction');
}
}
}
function treeItems(val){
var lala = $(val).parent().parent();
if(lala.children('.workItemSubpageBox').css("display") == "none"){
lala.children('.workItemSubpageBox').css("display","block");
$(val).children('.subpageTitle').text("收起");
}else{
lala.children('.workItemSubpageBox').css("display","none");
$(val).children('.subpageTitle').text("下级");
}
}
</script>
四、效果图
dome.png
网友评论