javascript - 在移动设备和桌面设备之间切换悬停下拉菜单

Question

我有一些简单的 JS，可以根据浏览器的宽度删除或​​添加 html。如果它在移动设备中，则应删除属性 data-hover。如果宽度在桌面，则应添加该属性。

到目前为止效果很好，但问题是 Bootstrap 无法识别 data-hover 已被删除。当用户的鼠标离开下拉菜单时，下拉菜单仍会关闭。需要明确的是，当浏览器窗口宽度低于 768 像素时，当用户的鼠标离开下拉菜单时，我希望下拉菜单保持打开状态。

出了什么问题，我该如何解决？

JS

$(document).ready(function () {
  $( window ).resize(function() {
    if ($( window ).width() < 768) {
      $('.dropdown-toggle').removeAttr('data-hover');
    } else {
      $('.dropdown-toggle').attr('data-hover', 'dropdown');
    }
  });
});

HTML

<a class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown" role="menu" aria-expanded="false" href="/courses">
  Courses               
</a>

<ul class="dropdown-menu courses-dropdown">
  <li>hello</li>                            
</ul>

Answer 1

您可以像这样将其重新分配给任何内容，而不是完全删除该属性:

$('.dropdown-toggle').attr('data-hover', '');

如果没有为该属性分配值，它不应该做任何事情。