jquery实现一个简单的菜单栏手风琴效果

最新推荐文章于 2021-12-08 14:44:24 发布

原创最新推荐文章于 2021-12-08 14:44:24 发布 · 679 阅读

2 ·

CC 4.0 BY-SA版权

JQuery 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍使用jQuery实现手风琴效果菜单的具体步骤，包括HTML结构搭建、CSS样式设定及jQuery交互代码，实现点击菜单标题时展开或折叠相应内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery实现一个菜单栏手风琴效果

- 效果图
- 代码实现

效果图

在这里插入图片描述

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        .parentWrap{
            width: 200px;
            margin: 100px auto 0;
            background-color: plum;
        }
        span{
            line-height: 30px;
            text-align: center;
            height: 30px;
            display: block;
            cursor: pointer;
        }
        div{
            background-color: #ff8;
            height: 100px;
            display: none;
        }

    </style>
</head>
<body>
        <ul class="parentWrap">
            <li class="menuGroup">
                <span class="groupTitle">标题1</span>
                <div>我是弹出来的div1</div>
            </li>
             <li class="menuGroup">
                <span class="groupTitle">标题2</span>
                <div>我是弹出来的div2</div>
            </li>
             <li class="menuGroup">
                <span class="groupTitle">标题3</span>
                <div>我是弹出来的div3</div>
            </li>
             <li class="menuGroup">
                <span class="groupTitle">标题4</span>
                <div>我是弹出来的div4</div>
            </li>
             <li class="menuGroup">
                <span class="groupTitle">标题5</span>
                <div>我是弹出来的div5</div>
            </li>
        </ul>

    
</body>
</html>
<script src="jquery-3.4.1.min.js"></script>
<script>
        $(function(){
                //需求：点击标题li标签，对应的div显示，他的兄弟标签li下面的div隐藏
                $(' .parentWrap> .menuGroup').click(function(){
                    // jquery特性：链式编程
                    // 一个方法返回的是一个jquery对象，既然是对象就可以继续点出方法
                        $(this).children('div').show().parent().siblings('li').children('div').hide();
                        //show()方法有返回值，返回的值为当前的元素，然后可以找到它的父元素，
                        // 通过父元素可以找到父元素的兄弟元素，然后可以找到父元素中的div元素设置隐藏
                });
            
            
            });

</script>