初始化为全部隐藏

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

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

下面是代码部分

<!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. Word 中批量修改所有表格格式样式

    1. 引言 我们在使用Word排版编写书籍时候,可能会带有许多表格,上百,甚至上千个表格都是有可能的.这么多的表格对于后期的样式修改是非常不利的,有什么好的方法能够一次性修改文档中所有的表格,将其统一 ...

  2. 地址解析协议（ARP）

    地址解析协议(ARP) 地址解析协议(ARP)是指网络地址和MAC地址之间的转换 当一台主机需要向另一台主机发送数据时,需要知道目的主机的ip地址外还需要知道目的主机的mac地址.源主机首先会在自己的 ...

  3. Vue.js源码全方位深入解析--学习笔记

    模板中的插入变量是如何渲染到DOM上的? initMixin(Vue)->_init->$options-> $mount()当执行该挂载方法时DOM变化 为什么可以通过this访问 ...

  4. 最简容器化动手小实践——再战flappybird

    <Flappy Bird>是一名越南开发者所开发的游戏,这款游戏的主要内容是帮助一只小鸟穿越水管的层层阻碍,玩家所需要的只是点击屏幕从而调整小鸟的高度.而令这款游戏与众不同的是,这款游戏的 ...

  5. 海思HI35xx平台软件开发快速入门之H264解码实例学习

    ref :https://blog.csdn.net/wytzsjzly/article/details/82500277   前言 H264视频编码技术诞生于2003年,至今已有十余载,技术相当成熟 ...

  6. 【Linux】Shell批量修改文件名

    修改文件名,替换中间字符: 例如:ABC_define_EFG.jpg,要把中间的define替换成argument: 用如下脚本即可: for var in *; do mv "$var& ...

  7. Linux Nginx的权限——访问本地目录报错403

    在安装好FastDFS并成功上传图片文件后,根据FastDFS返回的文件地址无法通过HTTP(即浏览器)访问到,报错404或者403. 不管是Error 404还是Error 403,基本都是Ngin ...

  8. Python Unittest进行接口测试的简单示例

    今年肯定是要把Python学到一定程度的,否则感觉自己混不下去了,那就开始半挣扎的咸鱼生活吧. ---------------------------------------------------- ...

  9. JS权威指南读书笔记（三）

    第七章 数组 1 数组的实现是经过优化的,用数字索引来访问数组元素一般来说比访问常规的对象属性要快的多. 2 数组直接量的语法允许有可选的结尾的逗号,故[ ; ; ]只有两个元素而非三个. 3 调用构 ...

  10. Lumen5.6使用JWT【最新教程】，亲身失败百次的总结

    一.前言 如果需要使用 Passport,可以参考在下之前的教程: 'Lumen5.4配置OAuth2.0[强迫症,就是要用最新版本的Lumen]' . 由于原作者文档的简洁性,同时 Lumen 下的 ...