在悬停时制作 Twitter Bootstrap 菜单下拉菜单，而不是轻松点击（解决方案）

Posted 2023-03-06

【中文标题】在悬停时制作 Twitter Bootstrap 菜单下拉菜单，而不是轻松点击（解决方案）

【英文标题】：Make Twitter Bootstrap menu dropdown on hover rather than click easily (solution)

【发布时间】：2019-12-24 13:06:42

【问题描述】：

我希望我的切换下拉按钮在悬停而不是单击时显示下拉菜单。为此，我使用引导方法$().dropdown('show')。你在想什么？

  $(document).on("mouseenter", "#dropdown-menu-button", (e) => 
    $(e.currentTarget).dropdown('show');
  );

【参考方案1】：

您正在收听“onmouseover”事件。因此，当您将鼠标移动到元素时它会立即触发。所以它会打开下拉菜单。但是你也需要监听'onmouseleave'事件。这样你就可以在鼠标离开时隐藏下拉菜单。

$(document).on("mouseleave", "#dropdown-menu-button", (e) => 
    $(e.currentTarget).dropdown('hide');
  );

但是，最好的方法是使用 jquery 提供的 hover() 方法。它将为 mouseover 和 mouseleave 事件绑定侦听器。

$('#dropdown-menu-button').hover(function()
    $(this).dropdown('show');
, function()
    $(this).dropdown('hide');
);

【讨论】：

如果它解决了您的问题，请接受答案。谢谢