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. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...

随机推荐

mysql 修改数据库的列
alter table tableName oldcolumn newcolumn datatype;
Python3基础 len函数获得一个字符串的字符个数
镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...
01scala环境搭建和基础
1.环境搭建 1.下载安装jdk1.7以上版本,并进行环境变量的配置 2.下载scala-2.10.4.msi,安装后进行环境变量的配置 3.下载scala-SDK-4.1.1-vfinal-2.11 ...
uTenux——软件底层驱动组织结构介绍
经过第一节对uTenux初步认识和第二节对uTenux\AT91SAM3S4C开发板的硬件结构的介绍,这一节我们将要学习的是uTenux\AT91SAM3S4C的软件底层驱动. 在悠龙公司的官网或者u ...
Xcode 创建.a和framework静态库
库介绍库从本质上来说是一种可执行代码的二进制格式,可以被载入内存中执行.库分静态库和动态库两种. iOS中的静态库有 .a 和 .framework两种形式:动态库有.dylib 和 .framew ...
JSON 数据解析
json解析的几种方法(将字符串解析为object对象和objectArray对象数组) 1 Android自带api 包名 org.json // json = {"school&quo ...
再论EM算法的收敛性和K-Means的收敛性
标签(空格分隔): 机器学习 (最近被一波波的笔试+面试淹没了,但是在有两次面试时被问到了同一个问题:K-Means算法的收敛性.在网上查阅了很多资料,并没有看到很清晰的解释,所以希望可以从K-Mea ...
SpringMVC 登陆判断
struts2:extends ActionSupport @Override public String execute() throws Exception { User user = userS ...
禁止 IOS 系统数字变超链（自动识别为电话号码）
在测试中发现iPad上的Safari总会把长串数字识别为电话号码,文字变成蓝色,点击还会弹出菜单添加到通讯录. 别的地方倒也罢了,如果在用户名中出现数字(手机注册新浪微博的话用户名就是“手机用户xxx ...
对List中对象的去重
今天项目中遇到了一个对List中对象去重的问题. 首先对于我们自己系统中的对象我们只要重写该对象的 equal 和 hashcode 即可(利用对象中的能够唯一确定对象的属性). 但是我遇到的不是本系 ...

jq实现多级手风琴效果

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

随机推荐

热门专题