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

您可以这样使用toggle：

$('#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"); 
                }       
            });  
        }); 
  });

Answer 3

首先，您现在应该使用http://api.jquery.com/on/而不是明显的授权。当然，您可以使用.click()方法。您所需要的只是在单击时读取对象的当前状态。如果它是可见的，那么隐藏它，如果不是，那么显示它。你可以通过全局变量或使用可见选择器来实现这一点。