2023.12.1 手风琴菜单的简便实现方式

最新推荐文章于 2024-05-09 11:16:38 发布

leigh_chen

最新推荐文章于 2024-05-09 11:16:38 发布

阅读量405

点赞数 9

分类专栏：开发日记文章标签：前端 javascript html

本文链接：https://blog.csdn.net/leigh_chen/article/details/134759727

版权

开发日记专栏收录该内容

70 篇文章 1 订阅

订阅专栏

2023.12.1 手风琴菜单的简便实现方式

原先一般都用循环方式去写手风琴菜单，对单个菜单的样式调整并不灵活，并且需要清楚控制逻辑，偶然看到一种写手风琴菜单的方式，通过js传id的方式实现，也可以用于下拉菜单。记录下来供参考。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后端管理网站</title>
    <style>
        /* 隐藏下拉菜单 */
        #menu1, #menu2 {
            display: none;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#" onclick="toggleMenu('menu1')">菜单1</a>
            <ul id="menu1">
                <li><a href="#">子菜单1</a></li>
                <li><a href="#">子菜单2</a></li>
                <li><a href="#">子菜单3</a></li>
            </ul>
        </li>
        <li><a href="#" onclick="toggleMenu('menu2')">菜单2</a>
            <ul id="menu2">
                <li><a href="#">子菜单4</a></li>
                <li><a href="#">子菜单5</a></li>
                <li><a href="#">子菜单6</a></li>
            </ul>
        </li>
        <li><a href="#">菜单3</a></li>
    </ul>

    <script>
        function toggleMenu(id) {
            var menu = document.getElementById(id);
            if (menu.style.display === 'block') {
                menu.style.display = 'none';
            } else {
                menu.style.display = 'block';
            }
        }
    </script>
</body>
</html>

leigh_chen

关注

9
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
2023.12.1 手风琴菜单的简便实现方式

原先一般都用循环方式去写手风琴菜单，对单个菜单的样式调整并不灵活，并且需要清楚控制逻辑，偶然看到一种写手风琴菜单的方式，通过`js`传`id`的方式实现，也可以用于下拉菜单。记录下来供参考。
复制链接

扫一扫