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

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>

- thank_you

---

"data-hover" 实际上是做什么的？ - Andrew Kilburn

请查看此链接：https://dev59.com/Vl8f5IYBdhLWcg3wD_Av - Molda

Answer 1

不要完全删除该属性，您可以将其重新分配为空，如下所示：

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

如果属性没有赋值，它不应该有任何作用。

- BDD

---

工作完成了。我需要等待24小时才能颁发赏金。 - thank_you

Answer 2

注意: BDD提供的解决方案是把data-hover设置为空字符串，如果您使用负责任地构建的下拉悬停插件，这将起作用。然而，OP使用的是相当糟糕的下拉悬停插件，本答案旨在用胶带解决该插件的问题。

看起来data-hover不是bootstrap下拉菜单的一部分，而是某个人对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函数。这是如何防止内存泄漏的。谢谢。

- Ryan Wheale

---

非常好的写作。我将测试一下。虽然原始答案对我有用，但我开始遇到一些轻微的问题。让我测试一下您的答案，看看会发生什么。 - thank_you

看起来有多个插件使用了相同的技术，所以我可能选择了错误的插件。你能告诉我你正在使用哪个 data-hover 插件 - 它不是 Bootstrap 核心的一部分。这个 实际上做得很正确，并且他们已经在窗口大小小于768时禁用它，所以你不需要编写任何代码来打开或关闭它。 - Ryan Wheale

我进行了一些调查，现在正在使用这个。https://github.com/CWSpear/bootstrap-hover-dropdown - thank_you

是的，那就是我在答案中提到的。我不确定其他解决方案对你是否有效。如果可以的话，我建议切换到这个，否则请尝试上面我的答案中的代码。就像我说的，你可能需要稍微调整一下上面的代码，因为我无法真正测试它 - 但你应该能够看到发生了什么。 - Ryan Wheale

谢谢Ryan！会做的。 - thank_you

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

- cawecoy