本文旨在解决在响应式网站开发中遇到的两个常见问题：汉堡菜单无法正常展开以及图片画廊中链接导致的布局错乱。我们将提供详细的 HTML、CSS 和 JavaScript 代码示例，并针对问题原因进行分析，最终给出解决方案，帮助开发者更好地理解和解决类似问题。
汉堡菜单无法展开的问题
问题分析
当网站缩小到一定尺寸时，导航栏会收缩成汉堡菜单。问题在于，点击汉堡菜单图标时，本应添加或移除 active 类来控制导航栏的显示与隐藏，但实际上并没有生效。
解决方案
1. HTML 结构
首先，确保 HTML 结构正确。以下是包含导航栏和汉堡菜单图标的 HTML 代码：
Glitta Art Studio
2. CSS 媒体查询
接下来，检查 CSS 媒体查询是否正确设置。以下是针对小屏幕的 CSS 代码：
立即学习“Java免费学习笔记（深入）”；
@media(max-width: 1140px) {
section {
padding: 50px 8%;
}
#menu-icon {
display: initial;
color: var(--text-color);
}
header .navbar {
position: absolute;
top: -400px;
left: 0;
right: 0;
display: flex;
flex-direction: column;
text-align: center;
background: #2b2640;
transition: .3s;
}
header .navbar .active {
top: 70px;
}
.navbar a {
padding: 1.5rem;
display: block;
}
.col {
width: 50%;
margin-bottom: 10px;
}
}3. JavaScript 代码
最初的 JavaScript 代码使用 addEventListener 来监听点击事件。可以尝试直接在 HTML 元素中调用函数，并修改 JavaScript 代码如下：
JavaScript 代码：
function ToggleClassActive(){
let menu = document.querySelector("#menu-icon");
let navbar = document.querySelector(".navbar");
navbar.classList.toggle("active");
}注意事项： 确保 JavaScript 代码在 HTML 元素之后加载。通常，将
