移动端展开下拉菜单时导航自动关闭的问题求助

问题根源分析 #

1. HTML结构错误：部分<li>元素重复声明了class属性，导致Bootstrap的dropdown类无法被正确识别，下拉组件的原生逻辑失效。
2. CSS选择器错误：当前CSS控制下拉显示的选择器指向dropdown-item，但实际目标应该是dropdown-menu，导致下拉菜单的显示逻辑混乱。
3. 移动端点击事件冒泡：点击下拉菜单时，事件会冒泡到导航的收起触发器，触发整个导航的关闭动作。

具体修复步骤 #

1. 修复HTML结构错误 #

将<li>元素上重复的class属性合并，确保dropdown和nav-item类正确生效：

<!-- 错误示例 -->
<li class="et_pb_menu_page_id-home menu-item menu-item-type-custom menu-item-object-custom menu-item-home" class="nav-item active dropdown">

<!-- 修复后 -->
<li class="et_pb_menu_page_id-home menu-item menu-item-type-custom menu-item-object-custom menu-item-home nav-item active dropdown">

对所有包含下拉功能的<li>执行同样的合并操作，保证每个元素只有一个class属性。

2. 修正CSS下拉显示逻辑 #

替换原有的下拉显示规则，确保正确控制dropdown-menu的显示状态：

/* 移除错误的选择器 */
/* .dropdown-toggle:focus+.dropdown-item,
.dropdown-toggle:hover+.dropdown-item {
  display: block !important;
} */

/* 替换为正确的选择器 */
.dropdown-toggle:focus + .dropdown-menu,
.dropdown-toggle:hover + .dropdown-menu,
.nav-item.dropdown.show .dropdown-menu {
  display: block !important;
}

/* 修正移动端CSS规则 */
@media (max-width: 767px) {
  .nav-item.dropdown.show .dropdown-menu {
    display: block !important;
  }
}

3. 阻止点击事件冒泡（关键修复） #

添加JavaScript代码，阻止下拉菜单内的点击事件向上冒泡，确保点击下拉项时导航保持展开：

document.addEventListener('DOMContentLoaded', function() {
  // 阻止下拉菜单链接的事件冒泡
  document.querySelectorAll('.dropdown-menu a').forEach(link => {
    link.addEventListener('click', e => e.stopPropagation());
  });
  
  // 处理下拉触发器的点击逻辑
  document.querySelectorAll('.dropdown-toggle').forEach(toggle => {
    toggle.addEventListener('click', function(e) {
      e.stopPropagation();
      const parentItem = this.closest('.nav-item.dropdown');
      parentItem.classList.toggle('show');
      this.nextElementSibling.classList.toggle('show');
    });
  });
});

额外优化建议 #

• 尽量移除CSS中大量的!important声明，通过提升选择器权重来控制样式，减少样式冲突风险。
• 确认页面已引入Bootstrap JavaScript文件（若依赖其下拉组件），原生下拉功能需要JS支持才能正常工作。

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