使用jQuery移除Bootstrap导航栏data-hover属性无效的问题

嘿，我碰到过一模一样的坑！你说的情况大概率不是data-hover属性没被成功移除，而是绑定的悬停事件早就初始化完成了——哪怕你删掉属性，已经注册到元素上的事件还是会照常触发，跟属性存不存在没关系。

下面给你几个针对性的解决方案，按优先级排序：

1. 先确认属性真的被移除了 #

先别急着改逻辑，先在浏览器控制台里验证一下属性是否成功删除，避免是代码执行时机的问题：

$(document).ready(function() {
  // 检测触摸设备的函数
  function isTouchDevice() {
    return ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0);
  }

  if (isTouchDevice()) {
    const $dropdowns = $('.dropdown[data-hover]');
    // 打印移除前后的属性值，确认操作生效
    $dropdowns.each(function() {
      console.log('移除前:', $(this).attr('data-hover'));
      $(this).removeAttr('data-hover');
      console.log('移除后:', $(this).attr('data-hover'));
    });
  }
});

如果控制台输出里“移除后”是undefined，那属性确实删掉了，问题出在事件绑定上。

2. 解绑已注册的悬停事件 #

如果原来的悬停效果是通过jQuery的hover()方法绑定的（hover其实是mouseenter和mouseleave的语法糖），那直接删掉属性没用，得手动解绑这些事件：

$(document).ready(function() {
  function isTouchDevice() {
    return ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0);
  }

  if (isTouchDevice()) {
    // 移除data-hover属性
    $('.dropdown').removeAttr('data-hover');
    // 解绑mouseenter和mouseleave事件
    $('.dropdown').off('mouseenter mouseleave');
    
    // 这里添加你的触摸设备专属效果，比如点击切换下拉
    $('.dropdown').on('click', function(e) {
      e.stopPropagation();
      $(this).toggleClass('show');
      $(this).find('.dropdown-menu').toggleClass('show');
    });

    // 点击页面其他地方关闭下拉
    $(document).on('click', function() {
      $('.dropdown.show').removeClass('show');
      $('.dropdown-menu.show').removeClass('show');
    });
  }
});

3. 修改原悬停脚本的触发逻辑 #

如果悬停效果是你自己写的脚本，那可以改成每次触发前先检查data-hover属性是否存在，这样删掉属性后逻辑就自动失效了：

// 原来的悬停脚本（修改前）
// $('.dropdown[data-hover]').hover(...)

// 修改后的脚本
$('.dropdown').hover(
  function() {
    // 只有存在data-hover属性时才执行悬停逻辑
    if ($(this).attr('data-hover')) {
      $(this).addClass('show');
      $(this).find('.dropdown-menu').addClass('show');
    }
  },
  function() {
    if ($(this).attr('data-hover')) {
      $(this).removeClass('show');
      $(this).find('.dropdown-menu').removeClass('show');
    }
  }
);

4. 用CSS媒体查询兜底（如果是CSS实现的悬停） #

如果悬停效果是通过CSS选择器[data-hover]:hover实现的，那可以在触摸设备的媒体查询里直接禁用这个样式：

/* 针对触摸设备的媒体查询 */
@media (hover: none) and (pointer: coarse) {
  /* 禁用悬停触发的下拉效果 */
  .dropdown[data-hover]:hover .dropdown-menu {
    display: none !important;
  }
  /* 开启点击触发的下拉效果 */
  .dropdown.show .dropdown-menu {
    display: block !important;
  }
}

最后提醒一句：一定要确保你的代码是在DOM完全加载后执行的，比如放在$(document).ready()或者原生的DOMContentLoaded事件里，不然元素还没渲染出来，移除属性的操作就会无效。

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