如何通过点击图标实现JavaScript购物车显示功能？

核心问题：事件绑定对象错误 #

你当前的JavaScript把点击事件绑定在了购物车弹窗本身（#cart），但实际需要触发弹窗的是导航栏里的购物袋按钮（.cart-btn），所以点击图标时根本没触发事件逻辑。

修复步骤 #

1. 修正事件绑定目标 #

修改JavaScript代码，把事件监听对象换成导航栏的购物车按钮，同时补充关闭逻辑：

// 获取关键DOM元素
const cartBtn = document.querySelector('.cart-btn');
const cartOverlay = document.querySelector('.cart-overlay');
const cart = document.querySelector('#cart');
const closeCart = document.querySelector('.close-cart');

// 打开购物车
cartBtn.addEventListener('click', function() {
  cartOverlay.classList.add('active');
  cart.classList.add('is-active');
});

// 关闭购物车（点击关闭按钮）
closeCart.addEventListener('click', function() {
  cartOverlay.classList.remove('active');
  cart.classList.remove('is-active');
});

// 点击遮罩层也关闭购物车（可选优化）
cartOverlay.addEventListener('click', function(e) {
  if(e.target === cartOverlay) {
    cartOverlay.classList.remove('active');
    cart.classList.remove('is-active');
  }
});

2. 补充CSS显示隐藏逻辑 #

购物车弹窗默认需要隐藏，通过active类控制显示/隐藏：

/* 默认隐藏遮罩层和购物车 */
.cart-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 99;
  display: none;
}

.cart {
  position: fixed;
  top: 0;
  right: 0;
  width: 350px;
  height: 100%;
  background: #fff;
  padding: 20px;
  overflow-y: auto;
  z-index: 100;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

/* 激活状态下显示 */
.cart-overlay.active {
  display: block;
}

.cart.is-active {
  transform: translateX(0);
}

3. 修复HTML中的小问题 #

• 你重复写了两次<div class="cart-items">0</div>，保留导航栏里的那一个即可，移除购物车弹窗上方的重复元素。
• 静态HTML里的${item.id}会直接显示成文本，后续动态生成购物车项时再用模板字符串，现在可以先写死比如data-id="1"。

4. 确保脚本加载时机 #

把JavaScript代码放在</body>标签前，或者用DOMContentLoaded包裹，避免DOM未加载就执行脚本：

document.addEventListener('DOMContentLoaded', function() {
  // 上面的所有JS代码放在这里
});

测试验证 #

1. 点击导航栏的购物袋图标，遮罩层弹出，购物车从右侧滑入。
2. 点击关闭按钮或遮罩层空白处，购物车正常隐藏。

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