1

我需要在我的页面上添加一个迷你工具提示，并且由于奇怪的原因，不能使用 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')
   });
}
4

5 回答 5

3

你可以将你的showTooltip()函数体减少到......

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

$()如果您确定将始终传递 jQuery 对象，您也可能会丢失包装。但是，再次包装它并没有什么坏处，它为您提供了传递选择器或原生 DOM 元素的灵活性。

文档。

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

element.is(':hidden')

文档。

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

于 2011-04-08T14:35:31.610 回答
0

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

('#tooltip-about').toggle();
于 2011-04-08T14:35:25.637 回答
0 
function showTooltip(e){
    $(e).is(':hidden') ? $(e).show() : $(e).hide();
    return false;
}

$('#nav-about a').hover(
    function(){
        showTooltip('#tooltip-about');
    },
    function(){
       showTooltip('#tooltip-about');
    }
);
于 2011-04-08T14:36:03.630 回答
0

问题是如果不将鼠标悬停在元素上，您将无法单击。因此，工具提示由悬停事件显示，然后单击事件将其关闭。

您将需要某种方法来确定用户是否正在使用允许他们悬停并仅绑定适当事件的设备。

您可能可以使用类似的东西：

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();
}
于 2011-04-08T14:41:29.823 回答
0

尝试这个：

function showTooltip(e){
    if( $(e).css('display') =="none" ) {
      $(e).css('display', '');
    } else {
      $(e).css('display', 'none');
    }
    return false;
}
于 2011-04-08T14:37:59.817 回答