Question

我有一个jquery popup工作，点击显示。单击相同的选择器时，我需要再次隐藏它。但此刻它只是闪烁并重新加载。我已将其设置为关闭，如果您点击不是选择器的任何地方，但这不是我真正需要的。

这是我的代码完美运行我只需要知道如何再次点击它时隐藏它。

基本上我认为我需要知道的是如何跟踪哪个选择器被点击（有多个项目可以在同一页面上点击所有同一个类）所以我可以说是否再次点击关闭它??

$(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

尝试在此部分代码中将.fadeIn("fast");替换为.toggle("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()方法。您只需要在点击时读取对象的当前状态。如果它是可见的，那么隐藏它，如果没有，然后显示它。您可以使用全局变量或使用visible选择器来实现此目的。

jquery工具提示 - 单击以打开，然后单击关闭

3 个答案: