jquery实现菜单折叠

最新推荐文章于 2023-03-28 14:14:30 发布

匸幺乚

最新推荐文章于 2023-03-28 14:14:30 发布

阅读量296

点赞数

分类专栏： html jquery 文章标签： javascript

本文链接：https://blog.csdn.net/XL202108041100/article/details/119698008

版权

html 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

jquery

1 篇文章 0 订阅

订阅专栏

简化的折叠效果，为了方便初学者学习，没有设置太多的样式，希望能帮到大家

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 简单的样式 */
        .fold {
            width: 200px;
            border: 1px solid red;
        }

        a {
            display: block
        }

        .warp {
            display: none;
        }
    </style>
</head>

<body>
    <script src="./jquery-3.6.0.js"></script>
    <div class="fold">
        <div class="bd">菜单1</div>
        <div class="warp">
            <a href="#">子菜单</a>
            <a href="#">子菜单</a>
            <a href="#">子菜单</a>
        </div>
    </div>
    <div class="fold">
        <div class="bd">菜单1</div>
        <div class="warp">
            <a href="#">子菜单</a>
            <a href="#">子菜单</a>
            <a href="#">子菜单</a>
        </div>
    </div>
    <div class="fold">
        <div class="bd">菜单1</div>
        <div class="warp">
            <a href="#">子菜单</a>
            <a href="#">子菜单</a>
            <a href="#">子菜单</a>
        </div>
    </div>
    <script>
        // this指的就是".bd "  ,next就是同级的下一个元素, slideToggle 就是jquery的滑动效果,向上向下滑动
        $('.bd').click(function () {
            $(this).next('.warp').slideToggle();
        });

    </script>
</body>

</html>

匸幺乚

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery实现菜单折叠

简化的折叠效果，为了方便初学者学习，没有设置太多的样式，希望能帮到大家<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, in
复制链接

扫一扫