初始化为全部隐藏

点第一个，显示第一个所隐藏的内容

当点第二个的时候，第一个的内容隐藏，第二个栏目的内容显示，以此类推

下面是代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font: 14px/22px "Microsoft YaHei", arial, serif;
        }

        a, a:link, a:visited {
            color: #ccc;
            text-decoration: none;
        }

        .content {
            margin: 50px auto;
            width: 220px;
            height: auto;
        }

        .content > ul {
            list-style: none;
        }

        .content .menu-one > li {
            width: 220px;
            height: auto;
            overflow: hidden;
            border-top: 1px solid #888;
        }

        .content .menu-one > li.firstChild {
            border: 0;
        }

        .content .menu-one .header {
            height: 35px;
            background: #666;
            line-height: 34px;
            text-indent: 15px;
            cursor: pointer;
        }

        .content .menu-one .header:hover, .content .menu-one .menuOne-current {
            background: #777;
        }

        .content .menu-one .header > span {
            display: block;
        }

        .content .menu-one .header .txt {
            float: left;
            color: #fff;
        }

        .content .menu-one .header .arrow {
            float: right;
            width: 35px;
            height: 35px;
            background: url(arrow-d.png) no-repeat center center;
        }

        .content .menu-two {
            display: none;
            width: 220px;
            height: auto;
        }

        .content .menu-two li {
            width: 220px;
            height: 35px;
            background: #eee;
            border-top: 1px solid #ccc;
            line-height: 34px;
            text-indent: 40px;
        }

        .content .menu-two li.firstChild {
            border: 0;
        }

        .content .menu-two li a {
            display: block;
            color: #888;
        }

        .content .menu-two li:hover, .content .menu-two li.menuTwo-current {
            background: #fff;
        }

        .content .menu-show .header {
            background: #777;
        }

        .content .menu-show .header .arrow {
            background-image: url(arrow-u.png);
        }
    </style>
    <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>

</head>
<body>

<div class="content">
    <ul class="menu-one">
        <li class="firstChild">
            <div class="header"><span class="txt">一、HTML5基础教程</span> <span class="arrow"></span></div>
            <ul class="menu-two">
                <li class="firstChild"><a href="#">HTML5基础教程01</a></li>
                <li><a href="#">HTML5基础教程02</a></li>
                <li><a href="#">HTML5基础教程03</a></li>
                <li><a href="#">HTML5基础教程04</a></li>
            </ul>
        </li>
        <li>
            <div class="header"><span class="txt">二、CSS3基础教程</span> <span class="arrow"></span></div>
            <ul class="menu-two">
                <li class="firstChild"><a href="#">CSS3基础教程01</a></li>
                <li><a href="#">CSS3基础教程02</a></li>
                <li><a href="#">CSS3基础教程03</a></li>
                <li><a href="#">CSS3基础教程04</a></li>
            </ul>
        </li>
        <li>
            <div class="header"><span class="txt">三、JavaScript基础教程</span> <span class="arrow"></span></div>
            <ul class="menu-two">
                <li class="firstChild"><a href="#">JavaScript基础教程01</a></li>
                <li><a href="#">JavaScript基础教程02</a></li>
                <li><a href="#">JavaScript基础教程03</a></li>
                <li><a href="#">JavaScript基础教程04</a></li>
            </ul>
        </li>
        <li>
            <div class="header"><span class="txt">四、PHP基础教程</span> <span class="arrow"></span></div>
            <ul class="menu-two">
                <li class="firstChild"><a href="#">PHP基础教程01</a></li>
                <li><a href="#">PHP基础教程02</a></li>
                <li><a href="#">PHP基础教程03</a></li>
                <li><a href="#">PHP基础教程04</a></li>
            </ul>
        </li>
        <li>
            <div class="header"><span class="txt">五、IOS基础教程</span> <span class="arrow"></span></div>
            <ul class="menu-two">
                <li class="firstChild"><a href="#">IOS基础教程01</a></li>
                <li><a href="#">IOS基础教程02</a></li>
                <li><a href="#">IOS基础教程03</a></li>
                <li><a href="#">IOS基础教程04</a></li>
            </ul>
        </li>
    </ul>
</div>

<script>
    $(document).ready(function () {
        var aMenuOneLi = $(".menu-one > li");
        var aMenuTwo = $(".menu-two");

        $(".menu-one > li > .header").each(function (i) {
            $(this).click(function(){
                if ($(aMenuTwo[i]).css("display") == "block") {
                    $(aMenuTwo[i]).slideUp(300);
                    $(aMenuOneLi[i]).removeClass("menu-show")
                }else{
                    for (var j = 0; j < aMenuTwo.length; j++) {
                        $(aMenuTwo[j]).slideUp(300);
                        $(aMenuOneLi[j]).removeClass("menu-show");
                    }
                    $(aMenuTwo[i]).slideDown(300);
                    $(aMenuOneLi[i]).addClass("menu-show")
                }
            });
        });
    });
</script>
</body>
</html>

第二种方法（ps:跟第一个相比第二个比较简陋，但也是能用的）

<ul>
    <li class="">
        <a href="javascript:;">
            <img src="data:images/p6-1.png" alt=""><span>我的资料</span>
        </a>
        <ul>
            <li>
                <a href="wodeziliao.html">
                    <span>我的资料</span>
                </a>
            </li>
        </ul>
    </li>
    <li class="">
        <a href="javascript:;">
            <img src="data:images/p6-2.png" alt=""><span>我的发布</span>
        </a>
        <ul>
            <li><a href="wodefabu.html"><span>我的发布</span></a></li>
            <li><a href="wodefabu.html"><span>我的发布</span></a></li>
            <li><a href="wodefabu.html"><span>我的发布</span></a></li>
            <li><a href="wodefabu.html"><span>我的发布</span></a></li>
        </ul>
    </li>
    <li class="">
        <a href="javascript:;">
            <img src="data:images/p6-3.png" alt=""><span>我的收藏</span>
        </a>
        <ul>
            <li><a href="wodeshoucang.html"><span>我的收藏</span></a></li>
            <li><a href="wodeshoucang.html"><span>我的收藏</span></a></li>
            <li><a href="wodeshoucang.html"><span>我的收藏</span></a></li>
            <li><a href="wodeshoucang.html"><span>我的收藏</span></a></li>
        </ul>
    </li>
    <li class="">
        <a href="javascript:;">
            <img src="data:images/p6-4.png" alt=""><span>我的预约</span>
        </a>
        <ul>
            <li><a href=""><span>我的预约</span></a></li>
            <li><a href=""><span>我的预约</span></a></li>
            <li><a href=""><span>我的预约</span></a></li>
            <li><a href=""><span>我的预约</span></a></li>
        </ul>
    </li>
    <li class="">
        <a href="javascript:;">
            <img src="data:images/p6-5.png" alt=""><span>我的订单</span>
        </a>
        <ul>
            <li><a href=""><span>我的订单</span></a></li>
            <li><a href=""><span>我的订单</span></a></li>
            <li><a href=""><span>我的订单</span></a></li>
            <li><a href=""><span>我的订单</span></a></li>
        </ul>
    </li>
    <li class="">
        <a href="xiugaimima.html">
            <img src="data:images/p6-6.png" alt=""><span>修改密码</span>
        </a>
    </li>
    <li class="">
        <a href="">
            <img src="data:images/p6-7.png" alt=""><span>退出账号</span>
        </a>
    </li>
</ul>

$(".Ep_my_data li").click(function(){
    $(this).toggleClass("ssde");
    $(this).children(".Ep_my_data li ul").slideToggle("slow");
});

基于jQuery制作的手风琴折叠菜单的更多相关文章

  1. 基于jquery的简洁树形折叠菜单

    先上效果图: 最小的ul就是一个最小的树枝,空间允许时可无限扩展.html如下: <div class="panel panel-default"> <div c ...

  2. jQuery简单竖排手风琴折叠菜单代码

    项目需求1.刚开始只显示,每个标题, 2.让每个 li列表隔行换色 3.当我点击某个标题时,下面的列表会缓慢的展开,其他列表展开的内容会收起 <!DOCTYPE html> <htm ...

  3. jQuery&HTML&CSS3实现垂直手风琴折叠菜单方法讲解

    在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法. jQuery实现垂直手风琴折叠菜单示例代 ...

  4. [转] CSS3垂直手风琴折叠菜单

    [From] http://www.html5tricks.com/css3-ver-accordion-menu.html 之前我们已经分享过很多关于手风琴菜单了,有水平方向的,也有垂直方向的.今天 ...

  5. 动漫网站基于jquery的横向手风琴特效

    今天给大家分享一款动漫网站基于jquery的横向手风琴特效.这款手风琴特效适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...

  6. 基于jQuery开发的手风琴插件 jquery.accordion.js

     1.插件代码 少说多做,基于jQuery的手风琴插件jquery.accordion.js的代码:  /* * 手风琴插件说明: * 1.treeTrunk对应树干 * 2.treeLeaf对应树叶 ...

  7. dedecms模版制作活动的折叠菜单

    需要做成这种样式 url请求为这样: http://m03.com/plus/list.php?tid=19 这些菜单项都有对应的tid项,页面刷新后,应该将所有的菜单折叠起来,对于tid=19的菜单 ...

  8. javascript实现的手风琴折叠菜单效果

    演示地址:http://codepen.io/anon/pen/pJERMq 实现效果: HTML代码: <!DOCTYPE html> <html lang="en&qu ...

  9. 基于jquery网站左侧下拉菜单

    网站左侧下拉菜单jQuery代码.这是一款蓝色风格的适合做后台下拉菜单代码.效果图如下: 在线预览   源码下载 实现的代码: <div class="container"& ...

随机推荐

  1. PAT(B) 1072 开学寄语（Java）统计

    题目链接:1072 开学寄语 (20 point(s)) 题目描述 下图是上海某校的新学期开学寄语:天将降大任于斯人也,必先删其微博,卸其 QQ,封其电脑,夺其手机,收其 ipad,断其 wifi,使 ...

  2. go select 使得一个 goroutine 在多个通讯操作上等待。

    select 语句使得一个 goroutine 在多个通讯操作上等待. select 会阻塞,直到条件分支中的某个可以继续执行,这时就会执行那个条件分支.当多个都准备好的时候,会随机选择一个. pac ...

  3. •C#进阶系列——WebApi接口测试工具：WebApiTestClient

    阅读目录 一.WebApiTestClient介绍 二.WebApiTestClient展示 三.WebApiTestClient使用 1.如何引入组件 2.如何使用组件 四.总结 正文 前言:这两天 ...

  4. 【es6】promise

    一.什么是promise?我们用promise解决什么样的问题 promise是异步编程的一种解决方案:从语法上来说,Promise是一个对象,从他可以获取异步操作的信息:从本意上讲,它是承诺,它承诺 ...

  5. 利用WkHtmlToPdf，把H5 转成PDF

    工具下载地址: 链接:https://pan.baidu.com/s/1TSq2WWZcvPwuIfPRHST-FA 提取码:wkx8 原理: 通过IIS访问页面,利用WkHtmlToPdf.exe, ...

  6. MySQL中You can't specify target table '表名'（'sn_app_label'） for update in FROM clause错误解决办法

    在有些时候有级联关系的数据放在了同一张表中,在写sql语句的时候可能会遇到这样的场景:我要插入两条数据,第一条是父节点,第二条是子节点,关联关系是父节点的自增长id:在写这样的sql语句时有可能就会出 ...

  7. css 边框上如何写入文字？

    方法一: 1.首先,打开html编辑器,新建html文件,例如:index.html. 2.在index.html中的<body>标签中,输入html代码:. <div style= ...

  8. Hystrix 熔断器

    Hystrix 是Netflix开源的一个延迟和容错库,用于隔离访问远程服务,防止出现级联失败 一.Hystrix 的定义 二.Hystrix 的原理 在分布式式系统中应用熔断器后,服务调用方可以自己 ...

  9. S3C2440 gpio + main

    相关文章:http://blog.csdn.net/zhangxuechao_/article/details/77990854 举例 start.S .globl _start _start: /* ...

  10. 【亲测有效】vs2017无法断点

    解决方案: 一:设置为Debug模式 二:[工具]--[选项]--[调试]--[常规],取消打钩[要求源文件与原始版本完全匹配]