jq实现多级手风琴效果

/*左侧*/

.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");

    }

});

jq实现多级手风琴效果的更多相关文章

jq实现简单手风琴效果
文章地址:https://www.cnblogs.com/sandraryan/ 利用slideUp slideDown动画 <!DOCTYPE html> <html lang=& ...
JS+JQ手风琴效果
最新在学习JS写一些实用的小玩意——手风琴 CSS样式: <style type="text/css"> * { margin: 0px; border: 0px; p ...
jquery多级手风琴插件–accordion.js
手风琴菜单一般用于下拉导航,由于外观非常简洁,使用起来跟手风琴一样可以拉伸和收缩而得名,项目中适当应用手风琴效果会给用户带来非常好的体验.本文借助jQuery插件轻松打造一个非常不错的手风琴效果的菜单 ...
jQuery实现多级手风琴树形下拉菜单（源码）
前几天因为公司的菜单要调整,公司的UI框架是不支持的,所以就自己在网上找了一个下拉菜单,可以支持多级菜单数据的,菜单数据是从xml文件中配置后读取的,网上有许多这方面的例子感觉不是很好用,就打了个包贴 ...
基于css3实现手风琴效果
终于在凌晨一点钟逼迫自己写博客.一直想记录自己的前端工程师之路,但毕竟拖延症晚期.因为第一篇随笔,所以多写一点废话吧.刚刚从学校毕业,放弃了一直学习的java,而想从事前端的工作.第一是觉得osgi这 ...
使用 jQuery & CSS3 实现优雅的手风琴效果
手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...
基于 jQuery 实现垂直滑动的手风琴效果
今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...
纯CSS手风琴效果
CSS手风琴效果主体代码如下: ...
jquery 图片手风琴效果
这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...

随机推荐

Duilib将UI资源文件打包到exe教程
转载:http://www.voidcn.com/blog/w839687571/article/p-6001921.html 转载:http://www.voidcn.com/blog/x35698 ...
windows8运行php Composer出现SSL报错的问题
这是没有安装CA证书导致的!!! CA证书下载地址:http://curl.haxx.se/docs/caextract.html 然后修改php.ini文件 openssl.cafile= D:/w ...
CodeForces 384A Coder
Coder Time Limit:1000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u Submit Statu ...
SQL将金额转换为汉子
-- ============================================= -- Author: 苟安廷 -- Create date: 2008-8-13 -- Descrip ...
MySQL占用内存过大的问题解决
MySQL竟然变化这么大了,记忆里还是40MB左右的软件. 想找回记忆里大小的软件(老版本的软件),可以去这个地址看看:http://mirrors.soho.com 现在去官网下载都300多MB了… ...
【VB6笔记-01】读取Excel绑定到DataGrid
Private Sub cmdOpen_Click() CommonDialog1.Filter = "Excel???t(*.xlsx)|*.xlsx" CommonDialog ...
2.mybatis入门实例连接数据库进行查询
1.新建项目,添加mybatis和mysql的jar包 2.在mysql中新建表user[id,name,age] CREATE TABLE `users` ( `id` ) NOT NULL aut ...
OnClientClick的用法
摘自:http://blog.csdn.net/coolpig86/article/details/5439560 OnClientClick用于执行客户端脚本.当我们单击一个按钮时,最先执行的是On ...
Codeforces Round #287 (Div. 2) C. Guess Your Way Out! 思路
C. Guess Your Way Out! time limit per test 1 second memory limit per test 256 megabytes input standa ...
Python基础学习笔记（八）常用字典内置函数和方法
参考资料: 1. <Python基础教程> 2. http://www.runoob.com/python/python-dictionary.html 3. http://www.lia ...

jq实现多级手风琴效果

jq实现多级手风琴效果的更多相关文章

随机推荐

热门专题