初始化为全部隐藏

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

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

下面是代码部分

<!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. 循环（数组循环、获取json数据循环）、each()循环详解

    return; // 退出循环(不满足,退出此次循环.下次满足条件,依然会走此循环)return false; //退出函数(退出所有) 一. 数组循环: html: <div class=&q ...

  2. 洛谷P4145——上帝造题的七分钟2 / 花神游历各国

    题目背景 XLk觉得<上帝造题的七分钟>不太过瘾,于是有了第二部. 题目描述 "第一分钟,X说,要有数列,于是便给定了一个正整数数列. 第二分钟,L说,要能修改,于是便有了对一段 ...

  3. 共阳极RGB LED二极管

    1)RGB LED二极管有四个引脚,它把3个普通led被封装在其内部,这三个led颜色分别为红.绿.蓝三种颜色,通过控制各个LED的亮度,你可以混合出几乎任何你想要的颜色,如下图: 2)RGB LED ...

  4. Python26之字典2（内置函数）

    一.工厂函数的概念 和序列类型的工厂函数一样,dict()也是一个工厂函数,本质上是一个类,Python程序无处不对象的概念可见一斑 二.字典类型内置函数的用法 1.fromkeys(iterable ...

  5. PPPoE中间人拦截以及校园网突破漫谈

    本文首发于PPPoE中间人拦截以及校园网突破漫谈,转载请注明出处. PPPoE中间人拦截以及校园网突破漫谈 校园生活快结束了,之前还有点未完成的想法,趁着这两天有兴趣搞搞. 此文面向大众是那种在校园内 ...

  6. 运输计划[二分答案 LCA 树上差分]

    也许更好的阅读体验 \(\mathcal{Description}\) 原题链接 概括一下题意 给一颗有\(n\)个点带边权的树,有\(m\)个询问,每次询问\(u,v\)两点间的权值和,你可以将树中 ...

  7. Consul 注册中心介绍

    在 Spring Cloud 体系中,几乎每个角色都会有两个以上的产品提供选择,比如在注册中心有:Eureka.Consul.zookeeper.etcd 等:网关的产品有 Zuul.Spring C ...

  8. 第二次用map23333

    度熊所居住的 D 国,是一个完全尊重人权的国度.以至于这个国家的所有人命名自己的名字都非常奇怪.一个人的名字由若干个字符组成,同样的,这些字符的全排列的结果中的每一个字符串,也都是这个人的名字.例如, ...

  9. c#使用GDI进行简单的绘图

    https://www.2cto.com/database/201805/749421.html https://zhidao.baidu.com/question/107832895.html pr ...

  10. 用python爬取豆瓣电影Top 250

    首先,打开豆瓣电影Top 250,然后进行网页分析.找到它的Host和User-agent,并保存下来. 然后,我们通过翻页,查看各页面的url,发现规律: 第一页:https://movie.dou ...