如何实现左侧菜单栏点击切换的下拉展开与收起功能？

下面是修改后的完整代码，实现点击按钮切换菜单的展开与收起，同时保留你原有的样式风格：

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-family: Arizonia;
            line-height: 1.6;
            margin: 0;
        }
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        a {
            color: #34495e;
            text-decoration: none;
        }

        .logo {
            margin: 0;
            font-size: 1.45em;
            text-align: center;
        }

        .menu-toggle {
            display: block;
            padding: 10px 15px;
            background-color: #f4f4f4;
            border: none;
            font-size: 1.2em;
            cursor: pointer;
            color: #34495e;
            text-align: center;
        }

        .main-nav {
            margin-top: 5px;
            display: none; /* 默认隐藏菜单 */
        }

        .main-nav.active {
            display: block; /* 添加active类时显示菜单 */
        }

        .logo a,
        .main-nav a {
            padding: 10px 15px;
            text-transform: uppercase;
            display: block;
        }

        .main-nav a {
            color: #34495e;
            font-size: .99em;
        }

        .main-nav a:hover {
            color: #718daa;
        }

        .header {
            padding-top: .5em;
            padding-bottom: .5em;
            border: 1px solid #a2a2a2;
            background-color: #f4f4f4;
            -webkit-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
            -moz-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
            box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <header class="header">
        <button class="menu-toggle">☰</button>
        <h1 class="logo"><a href="#">Our Wedding</a></h1>
        <ul class="main-nav">
            <li><a href="#">Our Story</a></li>
            <li><a href="#">Annoncements</a></li>
            <li><a href="#">Travel & Stay</a></li>
        </ul>
    </header>

    <script>
        // 获取菜单按钮和导航栏元素
        const menuToggle = document.querySelector('.menu-toggle');
        const mainNav = document.querySelector('.main-nav');

        // 给按钮添加点击事件，切换导航栏的active类
        menuToggle.addEventListener('click', () => {
            mainNav.classList.toggle('active');
        });
    </script>
</body>
</html>

关键改动说明： #

1. HTML结构新增菜单触发按钮

   • 添加了<button class="menu-toggle">☰</button>作为下拉菜单的触发按钮，用汉堡图标直观表示菜单功能。

2. CSS调整菜单显示逻辑

   • 给.main-nav添加display: none;，让菜单默认处于收起状态。
   • 新增.main-nav.active类，设置display: block;，当该类被添加时菜单展开显示。
   • 给.menu-toggle设置基础样式，让按钮和整体导航风格统一。

3. JavaScript实现点击切换

   • 通过querySelector获取按钮和导航栏元素。
   • 使用addEventListener给按钮绑定点击事件，每次点击调用classList.toggle('active')，实现菜单的展开/收起切换。

内容的提问来源于stack exchange，提问作者john meyer