如何用JavaScript禁用HTML的href属性？响应式菜单适配问题

不用移除href属性，直接通过拦截点击事件并根据当前窗口尺寸判断是否阻止跳转的方式，就能完美解决你的问题，还不用操心窗口缩放后恢复属性的麻烦。

核心思路 #

不修改href本身，而是在点击时判断当前是否处于移动端场景：

• 如果是移动端，阻止链接的默认跳转行为，转而触发下拉菜单展开
• 如果是桌面端，让链接保持正常跳转逻辑

这样不管用户怎么调整窗口大小，每次点击都会实时判断当前状态，完全不需要跟踪和恢复href属性。

具体实现方法 #

方法1：单个链接绑定事件

适合导航栏链接数量较少的场景：

// 获取所有带下拉菜单的导航链接
const dropdownLinks = document.querySelectorAll('.nav-dropdown-link');

// 定义点击处理函数
function handleDropdownClick(e) {
  // 自定义移动端阈值，比如768px
  const isMobile = window.innerWidth < 768;
  if (isMobile) {
    e.preventDefault(); // 阻止默认跳转
    // 触发下拉菜单展开/收起，这里假设下拉菜单是链接的下一个兄弟元素
    this.nextElementSibling.classList.toggle('active');
  }
}

// 给每个链接绑定点击事件
dropdownLinks.forEach(link => {
  link.addEventListener('click', handleDropdownClick);
});

方法2：事件委托（更高效）

适合导航栏链接动态生成或数量较多的场景，只需要给父元素绑定一次事件：

// 获取导航栏容器
const navContainer = document.querySelector('.nav-container');

navContainer.addEventListener('click', function(e) {
  // 判断点击的元素是否是下拉菜单链接，且当前是移动端
  if (e.target.classList.contains('nav-dropdown-link') && window.innerWidth < 768) {
    e.preventDefault();
    // 切换下拉菜单的显示状态
    e.target.nextElementSibling.classList.toggle('active');
  }
});

额外优化 #

如果需要在窗口 resize 时自动收起展开的下拉菜单，可以添加一个 resize 监听：

window.addEventListener('resize', function() {
  if (window.innerWidth >= 768) {
    // 桌面端时收起所有下拉菜单
    document.querySelectorAll('.dropdown-menu.active').forEach(menu => {
      menu.classList.remove('active');
    });
  }
});

内容的提问来源于stack exchange，提问作者Avarage cat enjoyer