使Twitter Bootstrap菜单悬停而不是轻松单击（解决方案）

Question

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

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

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