前端_三级不定层级的选中最后一级单选移动效果
接到一个效果，三级的不定层次的可以选择移动的效果，可以选中最后一级移动，一想，决定有点恶心，考虑了一下后就准备写了，最后写是写出来了，不过这种效果很少很少用，所以也就没有去封装成插件，技术有点low，只是分享一下，勿喷，代码贴上分享一下，希望能帮到和我碰到一样事情的前端爱好者：
html:
<div class="menuCont">
<!--左边-->
<div class="menuLeftDiv">
<ul class="menuLeftDiv_ul">
<li >
<a code="1">左边一级菜单1</a>
<ul>
<li>
<a code="11">左边二级菜单11</a>
<ul>
<li><a code="111">左边三级菜单111</a></li>
<li><a code="112">左边三级菜单112</a></li>
</ul>
</li>
<li>
<a code="14">左边二级菜单14</a>
<ul>
<li><a code="141">左边三级菜单141</a></li>
<li><a code="142">左边三级菜单142</a></li>
</ul>
</li>
</ul>
</li>
<li >
<a code="7">左边一级菜单7</a>
<ul>
<li>
<a code="17">左边二级菜单17</a>
<ul>
<li><a code="171">左边三级菜单171</a></li>
<li><a code="172">左边三级菜单172</a></li>
</ul>
</li>
</ul>
</li>
<li >
<a code="2">左边一级菜单2</a>
<ul>
<li> <a code="21">左边二级菜单21</a> </li>
</ul>
</li>
<li > <a code="8">左边一级菜单8</a> </li>
</ul>
</div>
<!--中间-->
<div class="menuCenterDiv">
<button class="menuRight">向右移动</button>
<button class="menuLeft">向左移动</button>
</div>
<!--右边-->
<div class="menuRightDiv">
<ul class="menuRightDiv_ul">
<li>
<a code="1">右边一级菜单1</a>
<ul>
<li>
<a code="11">右边二级菜单11</a>
<ul>
<li><a code="115">右边三级菜单115</a></li>
<li><a code="116">右边三级菜单116</a></li>
</ul>
</li>
<li>
<a code="12">右边二级菜单12</a>
<ul>
<li><a code="124">右边三级菜单124</a></li>
<li><a code="125">右边三级菜单125</a></li>
</ul>
</li>
</ul>
</li>
<li >
<a code="3">右边一级菜单3</a>
<ul>
<li>
<a code="31">右边二级菜单31</a>
<ul>
<li><a code="311">右边三级菜单311</a></li>
</ul>
</li>
</ul>
</li>
<li >
<a code="4">右边一级菜单4</a>
<ul>
<li>
<a code="41">右边二级菜单41</a> </li>
</ul>
</li>
<li >
<a code="2">左边一级菜单2</a>
<ul>
<li> <a code="21">左边二级菜单21</a> </li>
</ul>
</li>
</ul>
</div>
</div>
css:
<style>
.menuCont ul li a{
display: block;
width: 100%;
height: 100%;
border-bottom: 1px solid #aaa;
line-height: 40px;
}
.menuCont ul li{
width: 100%;
overflow: hidden;
}
.menuCont .menuLeftDiv>ul>li>a,.menuCont .menuRightDiv>ul>li>a{
padding-left: 20px;
background-color: #333;
color: #fff;
}
.menuCont .menuLeftDiv>ul>li>ul>li>a,.menuCont .menuRightDiv>ul>li>ul>li>a{
padding-left: 50px;
background-color: #999;
color: #fff;
}
.menuCont .menuLeftDiv>ul>li>ul>li>ul>li>a, .menuCont .menuRightDiv>ul>li>ul>li>ul>li>a{
padding-left: 80px;
}
.menuLeftDiv{
width: 40%;
float: left;
border: 1px solid #ddd;
height: 600px;
overflow: auto;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.menuCenterDiv{
width: 20%;
text-align: center;
float: left;
}
.menuCenterDiv button{
width: 60%;
background-color: #4f8ab4;
color: #fff;
margin: 100px auto;
height: 40px;
border: 0;
border-radius: 10px;
cursor: pointer;
}
.menuRightDiv{
width: 40%;
float: right;
border: 1px solid #ddd;
height: 600px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.textActive{
color: #ff917f !important;
}
</style>
js:
<script>
//点击li本行下面的ul显示和展开
$('.menuCont').on('click','li>a',function () {
if($(this).next('ul').length==0){
$('.textActive').removeClass('textActive');
$(this).addClass('textActive');
}else {
$(this).next('ul').toggle();
}
});
//清除class值
function removeHtml() {
if($('.textActive').parent().siblings().length==0&&$('.textActive').parent().parent().parent().siblings().length==0){
// console.log(555)
$('.textActive').parent('li').parent('ul').parent('li').parent('ul').parent('li').remove();
}else if($('.textActive').parent().siblings().length==0){
$('.textActive').parent().parent().parent().remove();
}else {
$('.textActive').parent().remove();
}
$('.textActive').removeClass('textActive');
}
function moveList(direction) {
if(direction=="right"){
var dtion=".menuRightDiv_ul";
console.log(123)
}else if(direction=="left"){
var dtion=".menuLeftDiv_ul";
console.log(456)
}
//当左边的值有二级的时候code值和右边的一级code值有重叠的时候
//获取左边的一级code值
$(dtion+'>li>a').each(function (i,e) {//循环一级a标记的code值
var LPcode=$('.textActive').parent('li').parent('ul').parent('li').parent('ul').siblings().attr('code');
var Rcode=$(this).attr('code');
//右边的二级code值
var Lcode=$('.textActive').parent().parent().siblings().attr('code');
//获取左边的code值
var thisCode=$('.textActive').attr('code');
//获取左边的内容
var thisHtml=$('.textActive').html();
//获取左边父标记的code
var Pcode=$('.textActive').parent('li').parent('ul').siblings('a').attr('code');
//获取左边父标记的内容
var Ptext=$('.textActive').parent('li').parent('ul').siblings('a').html();
$(this).siblings('ul').children('li').children('a').each(function (l,m) {
//右边的二级code值
var RerCode=$(this).attr('code');
if(RerCode==Lcode){
console.log($(this))
var LHtml="<li><a code='"+thisCode+"'>"+thisHtml+"</a></li>";
$(this).siblings('ul').append(LHtml);
removeHtml();
}
});
if($('.textActive').attr('class')!=undefined) {
if (LPcode == Rcode && LPcode != undefined) {
console.log(333)
var Lhtml = "<li><a code='" + Pcode + "'>" + Ptext + "</a>" +
"<ul><li><a content='" + thisCode + "'>" + thisHtml + "</a></li></ul>" +
"</li>";
$(e).siblings('ul').append(Lhtml);
removeHtml();
}
}
});
//当左边的code值和右边的code值没有重叠的时候
if($('.textActive').length!=0){
if ($('.textActive').parent().parent().parent().get(0).tagName == "DIV") {
console.log("一级");
//获取当前标记的HTML
var TextHtml = $('.textActive').html();
var cCode = $('.textActive').attr('code');
var TextHtml = "<li><a code='" + cCode + "'>" + TextHtml + "</a></li>";
} else if ($('.textActive').parent().parent().parent().parent().parent().get(0).tagName == "DIV") {
$(dtion).children('li').children('a').each(function (f,w) {
//左边的一级code值
var pareCode=$('.textActive').parent('li').parent('ul').siblings('a').attr('code');
if($(w).attr('code')==pareCode){
//获取选中的code 内容 拼接
var tcode=$('.textActive').attr('code');
var ttext=$('.textActive').html();
var thtml="<li><a code='"+tcode+"'>"+ttext+"</a></li>";
console.log($(w).html())
$(w).siblings('ul').append(thtml);
removeHtml();
}
})
if($('.textActive').attr('class')!=undefined) {
console.log("二级");
var TextHtml = $('.textActive').html();
var cCode = $('.textActive').attr('code');
//获取父标记的code值 和内容
var pCode = $('.textActive').parent().parent('ul').siblings('a').attr('code');
var pText = $('.textActive').parent().parent('ul').siblings('a').html();
var TextHtml = "<li>" +
"<a code='" + pCode + "'>" + pText + "</a>" +
"<ul>" +
"<li><a code='" + cCode + "'>" + TextHtml + "</a></li>" +
"</ul>" +
"</li>";
}
} else if ($('.textActive').parent().parent().parent().parent().parent().parent().parent().get(0).tagName == "DIV") {
console.log("三级");
var TextHtml = $('.textActive').html();
var cCode = $('.textActive').attr('code');
//获取父标记的code值 内容
var pCode = $('.textActive').parent().parent('ul').siblings('a').attr('code');
var pText = $('.textActive').parent().parent('ul').siblings('a').html();
//获取父标记的父标记的code 内容
var parCode = $('.textActive').parent().parent('ul').parent('li').parent('ul').siblings('a').attr('code');
var parText = $('.textActive').parent().parent('ul').parent('li').parent('ul').siblings('a').html();
var TextHtml = "<li><a code='" + parCode + "'>" + parText + "</a>" +
"<ul><li><a code='" + pCode + "'>" + pText + "</a>" +
"<ul><li><a code='" + cCode + "'>" + TextHtml + "</a></li></ul>" +
"</li></ul>" +
"</li>";
}
$(dtion).append(TextHtml);
removeHtml();
}
}
//点击向右的按钮
$('.menuRight').click(function () {
moveList("right")
});
//点击向左按钮的时候
$('.menuLeft').click(function () {
moveList("left");
});
</script>
有时间可以关注一下我的博客，有好的意见也希望大家多交流，技术在于讨论中进步：http://www.cnblogs.com/laiqiangjin
