Jquery 单击和悬停以及显示/隐藏功能奇怪

Question

我需要向我的页面添加一个迷你工具提示，但由于奇怪的原因，无法使用 jquery 提供的工具提示，所以我将制作自​​己的工具提示 - 但它不起作用!这是简单的代码:

$('#nav-about a').click(function(){
     showTooltip('#tooltip-about')
}).hover(function(){
     showTooltip('#tooltip-about')
});

和

function showTooltip(e){
    if( $(e).css('display') =="none" ) {
      $(e).show();
    } else {
      $(e).hide();
    }
    return false;
}

如果我将鼠标悬停，则会显示工具提示。但是，如果我点击，它就会被隐藏。基本上，当我单击时，它会将 css('display') 读取为隐藏而不是阻止。想法为什么？我这样做的唯一原因是为了 iPad 显示屏。大多数用户应该会看到翻转时的提示，但 iPad 用户看不到。欢迎其他解决方案!!!

谢谢!

更新:这就是有效的方法。我的逻辑错了:)。我只需要在 userAgent 上进行分支，而不是尝试同时处理两件事。

var isiPad = navigator.userAgent.match(/iPad/i) != null;
if (isiPad){
   $('#nav-about a').click(function(){
    showTooltip('#tooltip-about')
   })
}else{
   $('#nav-about a').hover(function(){
    showTooltip('#tooltip-about')
   });
}

Answer 1

您可以将 showTooltip() 函数的主体缩减为...

function showTooltip(e){
    $(e).toggle();
}

如果您确定始终会传递 jQuery 对象，您也可能会丢失 $() 包装。不过，再次包装它并没有什么坏处，而且它使您可以灵活地传递选择器或 native DOM 元素。

Documentation .

此外，为了明确检查元素是否隐藏，您可以使用...

element.is(':hidden')

Documentation .

请记住，具有 visibility: hide 或 opacity: 0 的元素被此选择器视为可见。