导航栏下拉菜单在悬停时消失

Question

当您单击“登录”时，在导航栏的右侧，它会生成带有登录框等的下拉菜单。但是，当您将鼠标悬停在鼠标上时，它会在一秒钟后消失。

我不知道是什么原因造成的，即使是基于CSS的...

任何帮助是极大的赞赏！

_showSubMenu = function(elem, elemID, options, menu, e) {
  var menuItem = $(e.currentTarget).find('> a');
  var subMenu = menuItem.next('.ipsMenu');
  $(e.currentTarget).on('mouseleave', _.bind(_hideSubMenu, this, elem, elemID, options, menu));
  var itemPosition = ips.utils.position.getElemPosition(menuItem);
  var itemSize = ips.utils.position.getElemDims(menuItem);
  var subMenuSize = ips.utils.position.getElemDims(subMenu);
  if ($('html').attr('dir') == 'rtl') {
    var right = (itemSize.outerWidth - 5);
    if ((itemPosition.viewportOffset.right + itemSize.outerWidth + subMenuSize.outerWidth - 5) > $(window).width()) {
      if ((itemPosition.viewportOffset.right + 5 - subMenuSize.outerWidth) >= 0) {
        right = ((subMenuSize.outerWidth * -1) + 5);
      }
    }
    subMenu.css({
      right: right + 'px',
      top: (menuItem.position()['top'] - 5) + 'px'
    }).show();
  } else {
    var left = (itemSize.outerWidth - 5);
    if ((itemPosition.viewportOffset.left + itemSize.outerWidth + subMenuSize.outerWidth - 5) > $(window).width()) {
      if ((itemPosition.viewportOffset.left + 5 - subMenuSize.outerWidth) >= 0) {
        left = ((subMenuSize.outerWidth * -1) + 5);
      }
    }
    subMenu.css({
      left: left + 'px',
      top: (menuItem.position()['top'] - 5) + 'px'
    }).show();
  }
}

Answer 1

看起来它是基于CSS的。 我会避免使用CSS悬停功能来创建该功能（因为它需要您的鼠标保持在按钮上，或者添加一些添加到其中的CSS）...相反，我建议使用jQuery的切换功能：

http://www.w3schools.com/jquery/eff_toggle.asp

就像是：

$("#signIn").click(function(){
    $("loginDiv").toggle();
}); 

应该可以。