设为首页收藏本站
开启辅助访问 广告合作开通会员官方QQ/微信群新人报到处

苏飞论坛

 找回密码
 马上注册

QQ登录

只需一步，快速开始

分布式系统框架(V2.0) 轻松承载百亿数据，千万流量！讨论专区 - 源码下载 - 官方教程

HttpHelper爬虫框架(V2.7-含.netcore) HttpHelper官方出品，爬虫框架讨论区 - 源码下载 - 在线测试和代码生成

HttpHelper爬虫类(V2.0) 开源的爬虫类,支持多种模式和属性 源码 - 代码生成器 - 讨论区 - 教程- 例子

苏飞论坛»主页 › 扩展技术 › 前端开发 › jQuery-实现列表两级显示和调整顺序效果
返回列表 发新帖
查看: 9262|回复: 0

[Jquery] jQuery-实现列表两级显示和调整顺序效果

[复制链接]
xyc
发表于 2021-6-24 11:11:26 | 显示全部楼层 |阅读模式
   做项目时遇到配置导航数据时，要求两级显示并且能调成顺序的效果，就动手做了一个效果给大家分享一下。有什么问题的话也可以联系我。
   效果：
   企业微信截图_16245038194716.png
   css样式：
   
[CSS] 纯文本查看 复制代码
*{padding: 0;margin: 0;box-sizing: border-box;}
a{cursor: pointer;text-decoration: none;}
li{list-style: none;}
.conts{padding: 15px;}
.conts .navhead{overflow: hidden;margin-bottom: 10px;}
.conts .navhead p{float: left;margin-top: 8px;}
.conts .navhead p label{display: inline-block;margin-left: 5px;}
.conts .navhead .addnavbers{
	float: right;
	
	}
.btns{
	width:80px;
	line-height: 32px;
	text-align: center;
	color: #333;
	border:1px solid #e3e2e8;
	font-size: 14px;
	border-radius: 5px;
}
.allnavlist {
    width: 100%;
    border: 1px solid #e3e2e8;
   
}
.nav-list{display: none;padding: 0;}
.navlist{display: block;}
.navlist ul{
    line-height: 55px;
    height: 55px;
    color: #333;
    font-size: 13px;
}
.allnavlist .navlist:nth-child(2n-1) ul{
    /*background: #f8f9fb;*/
}
.navlist li{float: left;text-align: center;}
.navlist .navid{width:15%;}
.navlist .navname{width:40%;text-align: left;padding-left: 50px;cursor: pointer;}
.navlist .navsort{width:20%;}
.navlist .navdel{width:25%;}
.navlist li em{
    font-size: 20px;
    margin-left: 10px;
    width: 20px;
    height:20px;
    display:inline-block;
    vertical-align: top;
    cursor: pointer;
}
.navlist li a{
    margin-left: 15px;
}
.navlist .navname img{
	margin-left: 60px;
	margin-right: 5px;
	display: inline-block;
}
.navlist input{margin-right: 20px;}

.conts input {
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    display: none;
    cursor: pointer;
}
.conts input[type="checkbox"] {
	text-indent:0;
	margin: 0;
	width: 15px;
	height: 15px;
	text-align:center;
	display: inline-block;
	vertical-align: middle;
	line-height: 15px;
	position: relative;
}
.conts input[type="checkbox"]::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	background: url(//static.ruituoyun.com/images/drag/PC/notchoose.png) no-repeat center;	
	width: 15px;
	height: 15px;
	background-size: 100%;	
}
.conts input[type="checkbox"]:checked{color:#fff}
.conts input[type="checkbox"]:checked::before {
	content:"";
	position: absolute;
	top: 0;
	left: 0;
	background: url(//static.ruituoyun.com/images/drag/PC/ychoose.png) no-repeat center;
	width: 15px;
	height: 15px;
	background-size: 100%;
	outline: none;
}
.navlist span{margin-left: 20px;}
 em.up-btn , em.down-btn{color:#bcc6d5;}
 em.up-btn.active , em.down-btn.active{color:#333;}

  HTML代码：
  
[HTML] 纯文本查看 复制代码
<div class="conts">
		<div class="navhead">
			<p>
				<input type="checkbox" name="nav" id="nvacheckbox"/>
				<label for="nvacheckbox">全选</label>
			</p>
			<a href="#" class="addnavbers btns" type="button" >添加导航</a>
		</div>
		<div class="allnavlist">
			<div class="nav-box">
				<div class="nav-top navlist">
					<ul>
						<li class="navid">
							<input type="checkbox" name="nav" />
							<span>001</span>
						</li>
						<li class="navname">
							<em class="iconfont"></em>
							网站主页1
						</li>
						<li class="navsort">
							<em class="iconfont down-btn"></em>
							<em class="iconfont up-btn"></em>
						</li>
						<li class="navdel">
							<a >修改</a>
							<a class="dele">删除</a>
						</li>
					</ul>
				</div>
				
					
			</div>
		
			<div class="nav-box">
				<div class="nav-top navlist">
					<ul>
						<li class="navid">
							<input type="checkbox" name="nav" />
							<span>001</span>
						</li>
						<li class="navname active">
							<em class="iconfont"></em>
							网站主页2
						</li>
						<li class="navsort">
							<em class="iconfont down-btn"></em>
							<em class="iconfont up-btn"></em>
						</li>
						<li class="navdel">
							<a >修改</a>
							<a class="dele">删除</a>
						</li>
					</ul>
				</div>
				
				<div class="navlist nav-list ">
					<ul>
						<li class="navid">
							<input type="checkbox" name="nav" />
							<span>001</span>
						</li>
						<li class="navname">
							<img src="//static.ruituoyun.com/images/drag/PC/branch.png" alt="" />
							内网站主页1
						</li>
						<li class="navsort">
							<em class="iconfont down-btn"></em>
							<em class="iconfont up-btn"></em>
						</li>
						<li class="navdel">
							<a >修改</a>
							<a class="deles">删除</a>
						</li>
					</ul>
				</div>
				<div class="navlist nav-list ">
					<ul>
						<li class="navid">
							<input type="checkbox" name="nav" />
							<span>001</span>
						</li>
						<li class="navname">
							<img src="//static.ruituoyun.com/images/drag/PC/branch.png" alt="" />
							内网站主页2
						</li>
						<li class="navsort">
							<em class="iconfont down-btn"></em>
							<em class="iconfont up-btn"></em>
						</li>
						<li class="navdel">
							<a >修改</a>
							<a class="deles">删除</a>
						</li>
					</ul>
				</div>
				<div class="navlist nav-list ">
					<ul>
						<li class="navid">
							<input type="checkbox" name="nav" />
							<span>001</span>
						</li>
						<li class="navname">
							<img src="//static.ruituoyun.com/images/drag/PC/branch.png" alt="" />
							内网站主页2
						</li>
						<li class="navsort">
							<em class="iconfont down-btn"></em>
							<em class="iconfont up-btn"></em>
						</li>
						<li class="navdel">
							<a >修改</a>
							<a class="deles">删除</a>
						</li>
					</ul>
				</div>
			</div>
			
			<div class="nav-box">
				<div class="nav-top navlist">
					<ul>
						<li class="navid">
							<input type="checkbox" name="nav" />
							<span>001</span>
						</li>
						<li class="navname active">
							<em class="iconfont"></em>
							网站主页3
						</li>
						<li class="navsort">
							<em class="iconfont down-btn"></em>
							<em class="iconfont up-btn"></em>
						</li>
						<li class="navdel">
							<a >修改</a>
							<a class="dele">删除</a>
						</li>
					</ul>
				</div>
				<div class="navlist nav-list ">
					<ul>
						<li class="navid">
							<input type="checkbox" name="nav" />
							<span>001</span>
						</li>
						<li class="navname">
							<img src="//static.ruituoyun.com/images/drag/PC/branch.png" alt="" />
							内网站主页1
						</li>
						<li class="navsort">
							<em class="iconfont down-btn"></em>
							<em class="iconfont up-btn"></em>
						</li>
						<li class="navdel">
							<a >修改</a>
							<a class="deles">删除</a>
						</li>
					</ul>
				</div>
				<div class="navlist nav-list ">
					<ul>
						<li class="navid">
							<input type="checkbox" name="nav" />
							<span>001</span>
						</li>
						<li class="navname">
							<img src="//static.ruituoyun.com/images/drag/PC/branch.png" alt="" />
							内网站主页2
						</li>
						<li class="navsort">
							<em class="iconfont down-btn"></em>
							<em class="iconfont up-btn"></em>
						</li>
						<li class="navdel">
							<a >修改</a>
							<a class="deles">删除</a>
						</li>
					</ul>
				</div>
			</div>
		
		</div>
	</div>

   js:
   
[JavaScript] 纯文本查看 复制代码
$(function(){
	secondLevelFunc();
    firstLevFunc();
    sorts();
	$(".allnavlist .navlist .navname").click(function(){
		if($(this).hasClass("active")){
			$(this).parent().parent(".nav-top").siblings(".nav-list").removeClass("navlist");
			$(this).addClass("actives").removeClass("active");
			$(this).children("em").html("");
			sorts();
		}else if($(this).hasClass("actives")){
			$(this).parent().parent(".nav-top").siblings(".nav-list").addClass("navlist");
			$(this).addClass("active").removeClass("actives");
			$(this).children("em").html("");
			sorts();
		}
	})
	$(".deles").click(function(){//单个删除
		$(this).parent().parent().parent().remove();
		 secondLevelFunc();
		secondLevFunc(_parents);
		sorts();
	})
	$(".dele").click(function(){//父级删除
		$(this).parent().parent().parent().parent().remove();
		firstLevFunc();
		sorts();
	})

	$("#nvacheckbox").on("click",function(){
        if(this.checked){
            $(".allnavlist input:checkbox").prop("checked", true);
        }else{
            $(".allnavlist input:checkbox").prop("checked", false);
        }
    });
    $(".nav-top .navid input").on("click",function(){
        if(this.checked){
            $(this).parent().parent().parent().siblings(".nav-list").find("input").prop("checked", true);
        }else{
            $(this).parent().parent().parent().siblings(".nav-list").find("input").prop("checked", false);                   
        }
    });
    $(".allnavlist input:checkbox").click(function(){           	
		allchk();
	});
	$(".allnavlist .nav-list input:checkbox").click(function(){           	
		allchks(this);
		allchk();
	});
})
	function allchks(th){
		$(th).parent().parent().parent().parent(".nav-box").addClass("navchoose");
		var chknum = $(th).parent().parent().parent().parent().children(".nav-list").find("input:checkbox").size();//选项总个数
		var chk = 0;
		$(".navchoose .nav-list input:checkbox").each(function () {  
	        if($(this).prop("checked")==true){
				chk++;
			}
	   });
		if(chknum==chk){//全选
			$(".navchoose .nav-top input:checkbox").prop("checked",true);
		}else{//不全选
			$(".navchoose .nav-top input:checkbox").prop("checked",false);
		}
		$(th).parent().parent().parent().parent().removeClass("navchoose");
	}		
	function allchk(){
		var chknum = $(".allnavlist input:checkbox").size();//选项总个数
		var chk = 0;
		$(".allnavlist input:checkbox").each(function () {  
	        if($(this).prop("checked")==true){
				chk++;
			}
	    });
		if(chknum==chk){//全选
			$("#nvacheckbox").prop("checked",true);
		}else{//不全选
			$("#nvacheckbox").prop("checked",false);
		}
	}
	//二级分类导航
    function secondLevelFunc() {
        var secondLevel = $(".nav-list"); 
        secondLevel.each(function () {
            var len = $(this).parents(".nav-box").find(".nav-list").length;
            if($(this).index() !== 0 && $(this).index() !== 1){
                $(this).find(".up-btn").eq(0).addClass("active child_btn");
            }
            if($(this).index() !== len){
                $(this).find(".down-btn").eq(0).addClass("active child_btn");
            }
        });
    }
    
	function sorts(){
		$(".allnavlist .navlist:even").css("background","#f8f9fb");
		$(".allnavlist .navlist:odd").css("background","#fff");
	}
   
    // 一级导航
    function firstLevFunc() {
        var firstLev = $(".nav-box");
        firstLev.each(function () {
        	if($(this).index() !== 0){
                $(this).find(".up-btn").eq(0).addClass("active parent_btn");
            }
            if($(this).index() !== firstLev.length - 1){
                $(this).find(".down-btn").eq(0).addClass("active parent_btn");
            }
            if($(this).index() === 0){
                $(this).find(".up-btn").eq(0).removeClass("active parent_btn");
            }
            if($(this).index() === firstLev.length - 1){
                $(this).find(".down-btn").eq(0).removeClass("active parent_btn");
            }
        });
    }
    // 二级导航
    function secondLevFunc(_this) {
        var secondLev = _this.find(".nav-list");
        secondLev.each(function () {
            if($(this).index() === 1){
                $(this).find(".up-btn").eq(0).removeClass("active child_btn");
            }
            if($(this).index() === secondLev.length){
                $(this).find(".down-btn").eq(0).removeClass("active child_btn");
            }
        });
    }

    // 上移
    $(document).on("click", ".up-btn.parent_btn", function () {
        var _this = $(this),
            $this = _this.parent().parent().parent().parent(".nav-box"),
            $thisNext = _this.parent().parent().parent().parent().prev(".nav-box");
        $this.after($thisNext);
        
        firstLevFunc();
        sorts();
    });
    $(document).on("click", ".up-btn.child_btn", function () {
        var _this = $(this),
            _parents = _this.parents(".nav-box"),
            $this = _this.parent().parent().parent(".nav-list"),
            $thisNext = _this.parent().parent().parent().prev(".nav-list");
        $this.after($thisNext);
        secondLevelFunc();
        secondLevFunc(_parents);
        sorts();
    });

    // 下移
    $(document).on("click", ".down-btn.parent_btn", function () {
        var _this = $(this),
            $this = _this.parent().parent().parent().parent(".nav-box"),
            $thisNext = _this.parent().parent().parent().parent().next(".nav-box");
        $this.before($thisNext);
       
        firstLevFunc();
        sorts();
    });
    $(document).on("click", ".down-btn.child_btn", function () {
        var _this = $(this),
            _parents = _this.parents(".nav-box"),
            $this = _this.parent().parent().parent(".nav-list"),
            $thisNext = _this.parent().parent().parent().next(".nav-list");
        $this.before($thisNext);
        secondLevelFunc();
        secondLevFunc(_parents);
        sorts();
    });

以上就是所有的代码了，由于页面上用到icon图标，如需源码，请点击》》 列表两级显示.zip (31.45 KB, 下载次数: 0)
jQuery, 两级显示, 调整顺序

相关帖子



1. 开通SVIP会员，免费下载本站所有源码，不限次数据，不限时间
2. 加官方QQ群，加官方微信群获取更多资源和帮助
3. 找站长苏飞做网站、商城、CRM、小程序、App、爬虫相关、项目外包等点这里
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 马上注册

本版积分规则

QQ|手机版|小黑屋|手机版|联系我们|关于我们|广告合作|苏飞论坛 ( 豫ICP备18043678号-2)

GMT+8, 2025-11-4 09:45

© 2014-2021

快速回复 返回顶部 返回列表