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

随机推荐

Linux有问必答：如何在Linux中修改环境变量PATH
提问: 当我试着运行一个程序时,它提示“command not found”. 但这个程序就在/usr/local/bin下.我该如何添加/usr/local/bin到我的PATH变量下,这样我就可以 ...
在JSP页面显示九九乘法表
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
HTML在IE中的条件注释
HTML在IE中的条件注释 HTML的条件注释在IE5中被首次引入,直到IE9.一直都是简单地判定用户浏览器(IE,非IE,IE版本)的一种手段,而在IE10的标准模式下,条件注释功能被停止支持(兼容 ...
ubuntu12.04安装mysql
首先下载ubuntu 12.04 64位对应的myqsl版本 http://dev.mysql.com/downloads/file/?id=464508 然后按照如下 ...
VIM如何将全部内容复制并粘贴到外部
ubuntu默认安装的vim是不支持系统剪切.粘贴版的,需要执行以下安装:sudo apt-get install vim-gnome 注意要让vim支持系统粘贴板,首先执行sudo apt-get ...
Give My Text Back
Give My Text Back 标签(空格分隔): 算法时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 To prepare for the English exa ...
vs无法打开项目的解决方案
错误提示: “未找到与约束 ContractName Microsoft.Internal.VisualStudio.PlatformUI.ISolutionAttachedCollectionSer ...
Java——Image 图片切割
package com.tb.image; import java.awt.Rectangle; import java.awt.image.BufferedImage; import java.io ...
thinkphp 初始配置
他喵的,去做了个其他的模板,一段时间不碰tp,居然配置了好久记录留备用一.把下好的ThinkPHP放到根目录的文件夹下 ,例如www文件夹下在www目录下新建文件夹admin和home 新建入口 ...
main函数中argc理解
其实: int main(int argc,char *argv[])是UNIX和Linux中的标准写法,而int main()只是UNIX及Linux默许的用法..void main(int arg ...

jq实现多级手风琴效果

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

随机推荐

热门专题