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