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ユーザーは見ることができません。他の解決策を歓迎します!!!

ありがとう！

更新：これが機能したものです。私は私の論理が間違っていました:)。一度に2つのことを処理しようとするのではなく、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 showTooltip(e){
    if( $(e).css('display') =="none" ) {
      $(e).css('display', '');
    } else {
      $(e).css('display', 'none');
    }
    return false;
}
于 2011-04-08T14:37:59.817 に答える
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 に答える