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

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

gxgalaxy

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

阅读量641

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/gxgalaxy/article/details/102991191

版权

JQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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>

gxgalaxy

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery实现一个简单的菜单栏手风琴效果

jquery实现一个菜单栏手风琴效果效果图代码实现效果图代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1...
复制链接

扫一扫

专栏目录