jqueryのツールチップ - クリックして開くと閉じる

Question

クリックして表示されるjqueryポップアップがあります。同じセレクタをクリックしたときに再び非表示にする必要があります。しかし、現時点では、それはちょうど点滅してリロードされます。セレクタではない場所をクリックすると閉じるように設定していますが、これは本当に必要なものではありません。

これは完全に動作する私のコードですが、もう一度クリックすると非表示にする方法を知る必要があります。

基本的に私が知る必要があるのは、どのセレクタがクリックされたかを追跡する方法です（同じクラスのすべての同じページでクリックできる複数のアイテムがあります）ので、再度クリックすると言うことができますそれを閉じる？

$(document).ready(function(){ 
     $("#tooltip").hide(); 
     $("a.highScoreTooltip").click(function(){            
      var game = $(this).attr('title'); 
      var offset = $(this).offset(); 
      var top = offset.top - 43; 
      var left = offset.left + 155; 
      $.ajax({ 
       type: "POST",  
       data: 'game=' + game, 
       url: "<?=$server_url?>leaderboard_popup.php", 
       cache: false, 
       success: function (html) { 
        $("#tooltip").show(); 
        $("#tooltip").html(html); 
        $("#tooltip") 
         .css("top",top + "px") 
         .css("left",left + "px") 
         .fadeIn("fast"); 
       }  
      }); 
     }); 
     jQuery(document).delegate(':not(#tooltip)', 'click', function(){ 
      $('#tooltip').hide(); 
     }); 
    }); 

Answer 1

コードのこのセクションで.toggle("fast")で.fadeIn("fast");を交換してみてください：

$("#tooltip") 
    .css("top",top + "px") 
    .css("left",left + "px") 
    .fadeIn("fast"); 

はあなたにまったく同じアニメーションを（あなたが望む答えではないかもしれない）を得ないかもしれないが、それは隠しを処理します/簡単に表示されます。

Answer 2

まず、委任の代わりにhttp://api.jquery.com/on/を使用する必要があります。もちろん、.click()の方法を使用できます。必要なのは、クリック時にオブジェクトの現在の状態を読み込むことだけです。表示されている場合は非表示にし、表示しない場合は非表示にします。グローバル変数を使用するか、visibleセレクタを使用してこれを実現できます。あなたがそのようなtoggleを使用することができます

Answer 3

：セレクタがクリックされたことを追跡するために

$('#book').toggle('slow', function() { // or toggle(showOrHide) 
    $("a.highScoreTooltip").click(function(){            
      var game = $(this).attr('title'); 
      var offset = $(this).offset(); 
      var top = offset.top - 43; 
      var left = offset.left + 155; 
      $.ajax({ 
       type: "POST",   
       data: 'game=' + game,  
       url: "<?=$server_url?>leaderboard_popup.php", 
       cache: false, 
       success: function (html) { 
        $("#tooltip").show(); 
        $("#tooltip").html(html); 
        $("#tooltip") 
         .css("top",top + "px") 
         .css("left",left + "px") 
         .fadeIn("fast"); 
       }  
      }); 
     }); 
    });