初始化为全部隐藏

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

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

下面是代码部分

<!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. [.Net] - 使用 iTextSharp 生成基于模板的 PDF，生成新文件并保留表单域

    背景 基于 PDF Template 预填充表单项,生成一份新的 PDF 文件,并保留表单域允许继续修改. 代码段 using iTextSharp.text.pdf; /* Code Snippet ...

  2. java当中JDBC当中请给出一个sql server的stored procedure例子

    3.sql server的stored procedure例子: import java.sql.*;public class StoredProc0 {public static void main ...

  3. Apache Rewrite 规则详解知识大全

    Rewrite是一种服务器的重写脉冲技术,它可以使得服务器可以支持 URL 重写,是一种最新流行的服务器技术.它还可以实现限制特定IP访问网站的功能. 1.Rewrite标志 R[=code](for ...

  4. 修改织梦DedeCMS投票漏洞

    织梦/dedecms系统我们都知道是有很多漏洞的,我在调试投票功能的时候正好要用到投票功能,这不就出现了漏洞,下面我就给大家展示如何修复这个织梦投票漏洞 首先我们打开//dedevote.class. ...

  5. 从零开始学Flask框架-007

    Flash消息 from flask import flash 渲染Flash消息,在基模板base.html中引入get_flashed_messages() {% extends "bo ...

  6. OSI七层模型对应功能及协议

    前言 OSI七层模型:纯理论模型,所有实际设备和协议都不能对应理论模型. 每一层对应着实际的设备 物理层:中继器.集线器.双绞线 数据链路层:网桥.以太网交换机.网卡 网路层:路由器.三层交换机 传输 ...

  7. PAT(B) 1034 有理数四则运算（Java）

    题目链接:1034 有理数四则运算 (20 point(s)) 题目描述 本题要求编写程序,计算 2 个有理数的和.差.积.商. 输入格式 输入在一行中按照 a1/b1 a2/b2 的格式给出两个分数 ...

  8. python装饰器无参及有参案例

    装饰器无参和有参案例:

  9. io.ByteIO和open操作二进制流的区别（转）

    转自Stack Overflow:https://stackoverflow.com/questions/42800250/difference-between-open-and-io-bytesio ...

  10. 在论坛中出现的比较难的sql问题：41(循环替换 循环替换关键字)

    原文:在论坛中出现的比较难的sql问题:41(循环替换 循环替换关键字) 所以,觉得有必要记录下来,这样以后再次碰到这类问题,也能从中获取解答的思路.