如何通过addEventListener实现点击切换下拉菜单显示/隐藏（含外部点击）

核心思路 #

• 通过视口宽度判断区分移动端与PC端，避免两类交互逻辑冲突
• 点击容器时切换菜单的显示类（用toggle替代单一的添加操作）
• 监听全局点击事件，点击菜单外部区域时自动关闭菜单
• 阻止菜单内部点击的事件冒泡，防止误触发关闭逻辑

修改后的完整代码 #

CSS（补充媒体查询，隔离PC/移动端样式）

/* 菜单默认隐藏 */
.dropdown-menu {
  display: none;
}

/* PC端hover触发逻辑 */
@media (min-width: 768px) {
  .dropdown-container:hover .dropdown-menu {
    display: flex;
    animation: openDropDown 0.4s ease 0s 1 forwards;
  }
}

/* 移动端点击激活样式 */
.dropdown-menuActions { 
  display: flex;
  animation: openDropDown 0.4s ease 0s 1 forwards;
}

HTML（保持原有结构即可）

<div class="dropdown-container" id="dropdownContainer">
  <label for="openDropdown" class="dropdown">
    <i class="fa fa-shopping-basket"></i><p class="titleDropdown" >Toate Produsele</p>
    <i class="fas fa-angle-down"></i>
  </label>
  
  <input type="checkbox" id="openDropdown" hidden>

  <div class="dropdown-menu" id="dropdownMenu">
      <span class="btnMobil"><a href="https://casacarolimarket.ro/categorie/mezeluri-si-carne/">Promotii</a></span> 
      <!-- 其他菜单内容 -->
  </div>
</div>

JavaScript（实现点击切换+外部关闭）

const dropdownContainer = document.getElementById('dropdownContainer');
const dropdownMenu = document.getElementById('dropdownMenu');
const MOBILE_BREAKPOINT = 768; // 自定义移动端断点，可根据需求调整

// 判断当前是否为移动端
function isMobile() {
  return window.innerWidth < MOBILE_BREAKPOINT;
}

// 切换菜单显示状态
function toggleDropdown() {
  if (!isMobile()) return; // PC端不执行点击逻辑
  dropdownMenu.classList.toggle('dropdown-menuActions');
}

// 点击外部区域关闭菜单
function closeOnOutsideClick(e) {
  if (!isMobile()) return;
  // 点击区域既不是容器也不是菜单内部时，关闭菜单
  if (!dropdownContainer.contains(e.target) && !dropdownMenu.contains(e.target)) {
    dropdownMenu.classList.remove('dropdown-menuActions');
  }
}

// 绑定容器点击事件，阻止冒泡避免刚打开就关闭
dropdownContainer.addEventListener('click', (e) => {
  e.stopPropagation();
  toggleDropdown();
});

// 绑定全局点击事件
document.addEventListener('click', closeOnOutsideClick);

// 窗口缩放时重置菜单状态，避免跨端显示异常
window.addEventListener('resize', () => {
  if (!isMobile()) {
    dropdownMenu.classList.remove('dropdown-menuActions');
  }
});

关键说明 #

• 媒体查询+JS判断：彻底隔离PC端hover与移动端点击逻辑，从根源避免冲突
• classList.toggle()：简化状态切换逻辑，无需手动判断菜单当前显示状态
• 事件冒泡控制：点击容器内部时阻止事件传递到全局，防止刚打开菜单就被误关闭
• 窗口 resize 监听：解决窗口缩放后，PC/移动端状态切换导致的菜单显示异常问题

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