Flask网页开发：点击菜单按钮弹出菜单应使用OnClick函数还是CSS

架构老林

2026-10-2

实现逻辑说明

菜单展开显示列表的功能需要CSS和JS配合完成，两者分工不同，不需要只选其一：

JS负责交互触发：检测用户点击动作，切换控制状态的类名
CSS负责样式呈现：定义菜单列表默认隐藏、激活状态下显示的样式，也可以加过渡动画优化体验

具体修改步骤

你现有的代码已经实现了汉堡图标转叉号的逻辑，只需要做3处补充即可：

1. 新增HTML菜单列表结构

在现有.container汉堡按钮的同级位置添加菜单列表代码：

<div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>
<!-- 以下为新增菜单列表 -->
<ul class="menu-list">
  <li>首页</li>
  <li>功能页</li>
  <li>设置</li>
  <li>退出登录</li>
</ul>

2. 补充CSS样式

在现有<style>标签内添加菜单的默认样式和激活状态样式：

/* 菜单列表默认隐藏样式 */
.menu-list {
  display: none;
  position: relative;
  left: 650px;
  top: 50px;
  list-style: none;
  margin: 0;
  padding: 10px 0;
  width: 160px;
  background-color: #fff;
  border: 1px solid #e5e5e5;
}
.menu-list li {
  padding: 8px 15px;
  cursor: pointer;
}
.menu-list li:hover {
  background-color: #f0f0f0;
}
/* 汉堡按钮激活时，相邻的菜单列表显示 */
.container.change + .menu-list {
  display: block;
}