jq实现多级手风琴效果

2022-09-09 17:52:26

/*左侧*/

.wrapper, .main {

    height: 100%;

    z-index: 9

}

.main {

    position: relative;

}

.main_L {

    width: 238px;

    height: 100%;

    background-color: #293038;

    position: absolute;

    left:;

    z-index: 99

}

.main_R {

    width: 100%;

    padding-left: 180px;

    z-index: -1;

}

.main_L a {

    color: #fff;

}

.main_list1 {

    cursor: pointer;

    background-color: #293038;

    color: #fff;

    text-align: center;

    font-size: 16px;

}

.mainList_a {

    display: block;

    width: 100%;

    height: 50px;

    line-height: 50px;

    position: relative;

    /*padding-left:30px;*/

}

.mainList_a b {

    width: 20px;

    height: 20px;

    background: url("left_bg.png") no-repeat -18px -658px;

    position: absolute;

    left: 10px;

    top: 50%;

    margin-top: -6px;

}

.mainList_a b.open {

    background: url("left_bg.png") no-repeat -25px -191px;

}

.main_list1 ul {

    display: none;

}

.main_list1 li a {

    display: block;

    height: 40px;

    line-height: 40px;

    font-size: 14px;

}

.main_list1 li a:hover {

    background-color: #208adb;

}

.header_user>a span{

    display: inline-block;

    width: 74%;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    *zoom:;

    *display: inline;

}

.main_list ul{display:none;}

.main_list2{padding-left:10px;}

.main_list3{padding-left:20px;}

.main_list4{padding-left:30px;}

left.css

/*公共样式--开始*/

html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select {

    margin:;

    padding:;

}

*{box-sizing: border-box;}

html, body {

    min-height: 100%;

}

body {

    font-family: "Microsoft YaHei";

}

ul, li {

    list-style: none;

}

img {

    border: none;

    vertical-align: middle;

}

a {

    text-decoration: none;

    color: #232323;

}

table {

    border-collapse: collapse;

}

input, textarea {

    outline: none;

    border: none;

}

textarea {

    resize: none;

    overflow: auto;

}

.clearfix {

    zoom:;

}

.clearfix:after {

    content: ".";

    width:;

    height:;

    visibility: hidden;

    display: block;

    clear: both;

}

.fl {

    float: left

}

.fr {

    float: right

}

.tl {

    text-align: left;

}

.tc {

    text-align: center

}

.tr {

    text-align: right;

}

.ellipse {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

/*公共样式--结束*/

public

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>头部和左侧菜单</title>

    <link rel="stylesheet" href="public.css"/>

    <link rel="stylesheet" href="left.css"/>

</head>

<body>

<div class="wrapper">

    <div class="main">

        <div class="main_L">

            <ul>

                <li class="main_list1">

                    <a href="javascript:void(0);" class="mainList_a"><b></b>222</a>

                    <ul>

                        <li class="main_list1 list_service">

                            <a href="javascript:void (0);" class="mainList_a">11</a>

                        </li>

                        <li class="main_list1 list_user">

                            <a href="javascript:void (0);" class="mainList_a"><b></b>11</a>

                            <ul>

                                <li class="main_list2">

                                    <a href="javascript:void (0);"  class="mainList_a"><b></b>11</a>

                                    <ul>

                                        <li class="main_list3">

                                            <a href="javascript:void (0);"  class="mainList_a">11</a>

                                        </li>

                                        <li class="main_list3"><a href="javascript:void (0);">11</a></li>

                                    </ul>

                                </li>

                                <li class="main_list2"><a href="javascript:void (0);">11</a></li>

                            </ul>

                        </li>

                        <li class="main_list1 list_order">

                            <a href="javascript:void (0);" class="mainList_a"><b></b>11</a>

                            <ul>

                                <li>

                                    <a href="javascript:void(0);"  class="mainList_a">11</a>

                                    <ul>

                                        <li><a href="javascript:void(0);">11</a></li>

                                        <li><a href="javascript:void(0);">11</a></li>

                                        <li><a href="javascript:void(0);">11</a></li>

                                    </ul>

                                </li>

                                <li><a href="javascript:void(0);">11</a></li>

                                <li><a href="javascript:void(0);">11</a></li>

                            </ul>

                        </li>

                        <li class="main_list1 list_news">

                            <a href="javascript:void (0);" class="mainList_a"><b></b>11</a>

                            <ul>

                                <li><a href="javascript:void(0);">11</a></li>

                            </ul>

                        </li>

                        <li class="main_list1 list_out">

                            <a href="javascript:void (0);" class="mainList_a"><b></b>11</a>

                            <ul>

                                <li>

                                    <a href="javascript:void(0);"  class="mainList_a">11</a>

                                    <ul>

                                        <li><a href="javascript:void(0);">11</a></li>

                                    </ul>

                                </li>

                            </ul>

                        </li>

                        <li class="main_list1 list_out">

                            <a href="javascript:void (0);" class="mainList_a"><b></b>11</a>

                            <ul>

                                <li>

                                    <a href="javascript:void(0);"  class="mainList_a">11</a>

                                    <ul>

                                        <li><a href="javascript:void(0);">查11</a></li>

                                        <li><a href="javascript:void(0);">11</a></li>

                                    </ul>

                                </li>

                            </ul>

                        </li>

                    </ul>

                </li>

            </ul>

        </div>

    </div>

</div>

</body>

<script src="jquery-1.11.3.min.js"></script>

<script src="common.js"></script>

</html>

$(function(){

    $(".mainList_a").on("click",function(){

        var $this=$(this);

        var $ul=$(this).siblings("ul");

        if($ul.css("display")=="none"){

            $this.siblings("ul").slideDown();

            $this.find("b").addClass("open");

        }else{

            $this.siblings("ul").slideUp();

            $this.find("b").removeClass("open");

        }

    });

    if (screen.width > 1180) {

        $("html").removeClass("screen1");

    } else {

        $("html").addClass("screen1");

    }

});

码农公寓

相关文章