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

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', '');

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

Answer 2

注意：如果您使用responsibly built dropdown hover plugin，BDD 提供的关于将data-hover 设置为空字符串的解决方案将有效。但是，OP 使用的是rather poorly built dropdown hover plugin，这个答案用于解决该插件的问题。

看来data-hover 不是引导下拉菜单的一部分，而是some guys extension to bootstrap。对你和整个社区来说不幸的是，这个家伙没有提供一种方法来破坏他的插件。插件作者从来没有提供拆除插件的方法总是让我感到惊讶，因为这是导致内存泄漏的严重原因，而且通常只是糟糕的编程。</rant>

为了使事情正确，您将不得不自己手动取消绑定和重新绑定事件。再一次，对你和社区来说不幸的是，他没有命名hover 事件 - 这又是真正不负责任的插件开发（在里面哭泣）。既然我们要做插件作者应该做的所有这些工作，我们不妨扩展插件，让它看起来好像作者知道他在做什么。请注意，如果页面上的任何其他功能正在将 hover 事件添加到下拉列表中，该功能将会中断（这是因为作者没有命名他的事件）。

$.fn.dropdownHover.disableAll = function () {
    $('[data-hover="dropdown"]').each(function() {
        $(this).off('hover').parent().off('hover').find('.dropdown-submenu').off('hover');
    });
});

$.fn.dropdownHover.enableAll = function () {
    $('[data-hover="dropdown"]').dropdownHover();
});

现在在你的 resize 事件中你应该做这样的事情：

var $window = $( window );
$(document).ready(function () {
  $window.resize(function() {
    if ($window.width() < 768) {
      $.fn.dropdownHover.disableAll();
    } else {
      $.fn.dropdownHover.enableAll();
    }
  });
});

您可能不得不使用上面的代码，因为我无法真正测试它。让我知道它是否有效。既然我们已经完成了所有这些工作，看在世上一切美好事物的份上，如果您在单页应用程序上使用此函数并且当前页面发生更改，请调用 disableAll 函数。这是防止内存泄漏的方法。谢谢。

Answer 3

这样做是为了让下拉菜单在桌面悬停和点击移动设备时显示：

使用data-toggle="dropdown" 获取上面的下拉菜单：

<a class="dropdown-toggle" data-toggle="dropdown" role="menu" aria-expanded="false" href="www.example.com">
  Parent
</a>
<ul class="dropdown-menu">
  <li>Child 1</li>                            
  <li>Child 2</li>          
  <li>Child 3</li>                            
</ul>

data-toggle="dropdown" 将阻止在点击和触摸时重定向到 URL。

使用ontouchstart检测移动浏览器，然后在单击父项时强制重定向到URL，仅适用于桌面（非移动）：

function is_touch_device() {
  return !!('ontouchstart' in window);
}
$(document).ready(function() {
    if(!is_touch_device()) {
        $('a.dropdown-toggle[data-toggle="dropdown"]').click(function (e) {
            window.location.href = $(this).attr('href');
        });
    }
});