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

Question

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

到目前为止这个工作很好,但问题是Bootstrap无法识别data-hover已被删除.当用户的鼠标离开下拉列表时,下拉列表仍会关闭.要清楚,当窗口浏览器宽度低于768px时,我希望当用户的鼠标离开下拉列表时,下拉列表保持打开状态.

怎么了,怎么解决这个问题？

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

注意：如果您使用负责任构建的下拉悬停插件， BDD 提供的关于设置data-hover空字符串的解决方案将起作用。然而，OP 使用的是一个相当糟糕的下拉悬停插件，这个答案可以解决该插件的问题。

看来这data-hover不是 bootstraps 下拉列表的一部分，而是一些人对 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();
});

现在在您的调整大小事件中您应该执行以下操作：

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

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