zoukankan html css js c++ java

css3和jQuery实现手风琴折叠菜单效果

以下内容转自：https://www.cnblogs.com/li-sir/p/7359212.html

1.源码

<!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>


</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 src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<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>

View Code

2.效果

转载文章链接已标明，如有侵权请告知。文章仅作为知识记忆所用，如有错误，敬请指正。

查看全文

相关阅读:
C#实现一个最简单的HTTP服务器
 WinForm特效:桌面上的遮罩层
 C#利用GDI+绘制旋转文字等效果
 C#程序通过模板自动创建Word文档
 C#生成软件注册码
 C# 利用WORD模板和标签（bookmark）批量生成WORD
绝对好文：.NET程序性能的基本要领
 Mysql学习---SQL测试题之表结构
 Mysql学习---基础操作学习2
Mysql学习---SQL语言的四大分类

原文地址：https://www.cnblogs.com/YorkZhangYang/p/14831543.html