如何用JS/CSS/jQuery实现可点击跳转且适配移动端的下拉菜单

原有方案问题说明 #

你之前写的全局CSS hover展开规则仅在配备鼠标的桌面设备上生效，移动端不存在原生hover交互逻辑，触摸点击主菜单项时会同时触发伪hover状态和链接跳转，导致交互错乱。

完整实现代码 #

CSS部分 #

通过媒体查询将hover展开效果限制在桌面端，同时新增移动端展开的状态类：

/* 断点可根据你的项目实际适配需求调整，这里以常见的768px移动端/桌面端分界为例 */
@media (min-width: 768px) {
  ul.nav li.dropdown:hover > .dropdown-menu {
    display: block;
  }
}
/* 移动端展开状态样式 */
.dropdown-menu.show {
  display: block;
}

注意：请删除你之前写的无媒体查询限制的全局hover展开规则，避免样式冲突。

JS交互部分 #

区分桌面/移动端场景做不同逻辑处理，兼顾主菜单跳转需求和下拉展开功能：

const dropdownEl = document.querySelector('.nav-item.dropdown');
const toggleEl = dropdownEl.querySelector('.dropdown-toggle');
const menuEl = dropdownEl.querySelector('.dropdown-menu');
const BREAKPOINT = 768; // 和CSS媒体查询断点保持一致

// 主菜单项点击逻辑
toggleEl.addEventListener('click', function(e) {
  // 桌面端直接放行跳转，不需要额外处理
  if (window.innerWidth >= BREAKPOINT) return;

  // 移动端逻辑：下拉未展开时先展开，阻止本次跳转
  if (!menuEl.classList.contains('show')) {
    e.preventDefault();
    // 收起其他已展开的下拉（多菜单场景可保留）
    document.querySelectorAll('.dropdown-menu.show').forEach(openMenu => {
      if (openMenu !== menuEl) openMenu.classList.remove('show');
    });
    menuEl.classList.add('show');
  }
  // 下拉已展开状态下点击，直接走默认跳转逻辑
});

// 点击菜单外区域收起移动端展开的下拉
document.addEventListener('click', function(e) {
  if (window.innerWidth >= BREAKPOINT) return;
  if (!e.target.closest('.dropdown')) {
    menuEl.classList.remove('show');
  }
});

// 窗口尺寸切换时重置下拉状态
window.addEventListener('resize', function() {
  menuEl.classList.remove('show');
});

交互效果说明 #

• 桌面端：鼠标hover在「Logistics Services」菜单项上自动展开下拉列表，点击菜单项直接跳转至mainservice.html
• 移动端：第一次点击主菜单项先展开下拉选项，不触发跳转；第二次点击主菜单项正常跳转至mainservice.html；点击下拉内选项正常跳转对应页面，点击页面非菜单区域自动收起下拉
• 适配注意：如果你项目中引入了Bootstrap默认的下拉组件JS，请先销毁原生下拉实例，避免原生逻辑强制阻止主菜单项跳转。

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