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

Posted 2023-05-07

【中文标题】在移动设备和桌面设备之间切换悬停在下拉菜单上

【英文标题】：Toggling hover on dropdown between mobile and desktop

【发布时间】：2016-10-23 06:56:06

【问题描述】：

我有一些简单的 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>

【问题讨论】：

数据悬停实际上是做什么的？

查看***.com/questions/25089297/…

【参考方案1】：

您可以将其重新分配给任何东西，而不是完全删除该属性：

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

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

【讨论】：

工作。我必须等待 24 小时才能获得赏金。

【参考方案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 函数。这是防止内存泄漏的方法。谢谢。

【讨论】：

写得很好。我要测试一下。尽管最初的答案对我有用，但我开始遇到一些小问题。让我测试一下你的答案，看看会发生什么。

似乎有多个插件使用相同的技术，所以我可能选择了错误的插件。你能告诉我你正在使用哪个data-hover 插件吗？它不是引导核心的一部分。 This one 实际上做到了正确，并且他们已经在 768 以下的窗口调整大小时禁用了它，因此您不需要编写任何代码来关闭或打开它。

做了一些挖掘，我正在使用它。 github.com/CWSpear/bootstrap-hover-dropdown

是的，这就是我在回答中引用的那个。我不确定其他解决方案如何为您工作。如果可以的话，我建议切换到this one，否则请尝试我上面答案中的代码。就像我说的那样，您可能需要稍微调整上面的代码，因为我无法真正对其进行测试 - 但您应该能够看到发生了什么。

谢谢瑞恩！会的。

【参考方案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');
        );
    
);