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

应该这样做。

Navbar下拉列表在悬停时消失

1 个答案: