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对象，您也可能会丢失$()包装。但是，再次包装它并没有什么坏处，它为您提供了传递选择器或本机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

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

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

你可能会使用类似的东西：

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

Jquery点击并悬停＆amp;显示/隐藏功能奇怪

5 个答案: