【小工具】一个简单实用的jQuery手风琴

最新推荐文章于 2025-07-29 11:19:45 发布

原创最新推荐文章于 2025-07-29 11:19:45 发布 · 306 阅读

0 ·

CC 4.0 BY-SA版权

小工具专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个使用HTML和CSS创建的手风琴菜单效果，并通过jQuery实现了点击展开和收起子菜单的功能。该示例包括多种课程分类及其子项，如软件教学、游戏动漫等，适用于网站导航栏设计。

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手风琴</title>
    <style>

        .wrap{ width: 200px;height: auto;margin:50px auto;border-radius: 5px }
        ul,li,h4{list-style: none;margin: 0;padding: 0}
        .wrap>ul{border-radius: 5px }
        .wrap>ul>li{background: #E4644B;text-align: center;border-bottom: solid 1px #DED1D1;color:#fff;cursor: pointer;position: relative;}
        .wrap>ul>li:last-child{border-bottom: none;}
        .wrap>ul>li h4{padding:8px 0;}
        .wrap>ul li span{position: absolute;top: 5px;right: 12px;font-size: 22px;color: #fff;display: inline-block;}
        .wrap>ul>li .child-ul{background: #fff;display: none; }
        .wrap>ul>li .child-ul li{color: #000;line-height: 40px;}
    </style>
</head>
<body>
    <div class="wrap">
        <ul class="menu">
            <li>
                <h4>软件jiaoxue</h4>
                <span>+</span>
                <ul class="child-ul">
                    <li>java</li>
                    <li>web前端</li>
                    <li>安卓开发</li>
                    <li>软件测试</li>
                </ul>
            </li>
            <li>
                <h4>游戏动漫</h4>
                <span>+</span>
                <ul class="child-ul">
                    <li>java</li>
                    <li>web前端</li>
                    <li>安卓开发</li>
                    <li>软件测试</li>
                </ul>
            </li>
            <li>
                <h4>电商企业</h4>
                <span>+</span>
                <ul class="child-ul">
                    <li>淘宝</li>
                    <li>天猫</li>
                    <li>京东</li>
                    <li>苏宁易购</li>
                </ul>
            </li>
            <li>
                <h4>营销培训</h4>
                <span>+</span>
                <ul class="child-ul">
                    <li>seo</li>
                    <li>微信营销</li>
                    <li>网络创业</li>
                    <li>市场营销</li>
                </ul>
            </li>
        </ul>
    </div>
    <script src="js/jquery-1.11.3.js"></script>
    <script type="text/javascript">
        $(function(){
            $(".wrap>ul>li").on("click",function(){
                var next = $(this).children(".child-ul");
                var icon = $(this).children("span");
                next.slideToggle('fade');
                if(icon.html()==="+"){
                    icon.html("-");
                }else{
                    icon.html("+");
                }
                $('.child-ul').not(next).slideUp('fast');//不是当前点击的内容全部向上收起
                $('.wrap>ul>li').children("span").not(icon).html("+");
                return false;
            })
        })
    </script>
</body>
</html>