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（'显示'）隐藏，而不是块。想法为什么？我这样做的唯一原因是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对象总是会被传递。但是，重新包装它并没有什么坏处，它可以让您灵活地传递选择器或本地DOM元素。

Documentation。

此外，对于显式地检查是否一个元素是隐藏的，可以使用...

element.is(':hidden') 

Documentation。

请记住，此选择器认为可以看到visibility: hidden或opacity: 0的元素。

Answer 2

为什么你不使用jquery的toggle类？例如：http://api.jquery.com/toggle/

('#tooltip-about').toggle(); 

Answer 3

function showTooltip(e){ 
    $(e).is(':hidden') ? $(e).show() : $(e).hide(); 
    return false; 
} 

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

Answer 4

试试这个：

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

Answer 5

的问题是，你不能按不还上空盘旋的元素。所以工具提示由悬停事件显示，然后点击事件关闭它。

您需要某种方式来确定用户是否在使用允许其悬停并仅绑定相应事件的设备。

你或许可以使用类似于此：

function isiPhone(){ 
    return (
     (navigator.platform.indexOf("iPhone") != -1) || 
     (navigator.platform.indexOf("iPod") != -1) || 
     (navigator.platform.indexOf("iPad") != -1) 
    ); 
} 

if (isiPhone()) { 
    $('#nav-about a').click(showTooltip) 
else 
    $('#nav-about a').hover(showTooltip) 

function showTooltip(e) { 
    e.preventDefault(); 
    $('#tooltip-about').toggle(); 
}