jQuery-实现列表两级显示和调整顺序效果 - 苏飞论坛

上传

点击文件名下载附件
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 .navlistdd").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图标，如需源码，请点击》》 (, 下载次数: 0)