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

随机推荐

3-WebPack
一. 什么是WebPack WebPack可以看做是模块加载.打包工具. 它所做的事情是 1.分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,Typ ...
C++函数前和函数后加const修饰符区别
class Test(){ public: Test(){} const int foo(int a); const int foo(int a) const; }; 一.概念当const在函数名前 ...
Formatting Excel File Using Ole2 In Oracle Forms
Below is the some useful commands of Ole2 to format excel file in Oracle Forms.-- Change font size a ...
[python]实现单机版一行wordcount
用过spark,对wordcount这个演示程序记忆犹新,于是想试着实现一个简单的wordcount.又因为在学习函数式编程,希望可以把数据看成一个整体,在现有的函数上进行操作.于是就有了这一行代码. ...
PE结构笔记
提示:前面加*为必须背下来的 DOS头: typedef struct _IMAGE_DOS_HEADER { // DOS .EXE header WORD e_magic; //* Magic n ...
ALV详解：OO SALV
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
[Effective Java]第五章泛型
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
hdu 0-1背包
题目地址http://acm.hdu.edu.cn/showproblem.php?pid=2602 #include <stdio.h> #include <string.h> ...
FZU 2105 Digits Count（位数计算）
Description 题目描述 Given N integers A={A[0],A[1],...,A[N-1]}. Here we have some operations: Operation ...
JMS【四】--Spring和ActiveMQ整合的完整实例
第一篇博文JMS[一]--JMS基本概念,我们介绍了JMS的两种消息模型:点对点和发布订阅模型,以及消息被消费的两个方式:同步和异步,JMS编程模型的对象,最后说了JMS的优点. 第二篇博文JMS[二 ...

jq实现多级手风琴效果

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

随机推荐

热门专题