jQuery的工具提示 - 点击以打开并单击以关闭

我有一个jquery弹出式工作，显示点击。当点击相同的选择器时，我需要再次隐藏它。但目前它只是闪烁并重新加载。我已经设置它，所以它关闭，如果你点击任何不是选择器，但这不是我真正需要的。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(); 
     }); 
    });

来源

2012-02-09 rosc0

来跟踪选择已被点击，您可以添加CSS类（[.addClass（）]（http://api.jquery.com/addClass /））在点击和删除（[.removeClass（）]（http://api.jquery.com/removeClass/））另一次点击。 – marioosh 2012-02-09 10:21:41

@marioosh对于这个类使用看起来有点不必要，因为它只有一个属性被改变（并且有足够多的jQuery函数来修改该特定属性） - 另外，如果您确实去上课，为什么不使用'.toggleClass（）'并且保存手动测试的麻烦？ – 2012-02-09 10:31:16

尝试在这部分代码与.toggle("fast")更换.fadeIn("fast");：

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

可能不会给你完全一样的动画（所以可能不是你想要的答案），但是它会处理隐藏/显示简单。

来源

2012-02-09 10:20:43

这适用于当您单击相同的选择器时，但现在如果我单击另一个选择器（显示弹出窗口），如果弹出窗口已经显示它消失，而不是只移动到下一个并显示内容。 – rosc0 2012-02-09 11:02:42

首先你应该使用http://api.jquery.com/on/而不是委托显然。当然你可以使用.click()方法。您只需要在点击时读入对象的当前状态。如果它是可见的，则隐藏它，如果没有，则显示它。您可以使用全局变量或使用visible选择器来实现此目的。

来源

2012-02-09 10:22:11

这取决于你使用的jQuery版本是什么 - 对于我们这些仍然使用1.7之前的版本的人来说，'.delegate（）'函数是推荐的方法。 – 2012-02-09 10:25:54

啊点采:) – 2012-02-09 10:28:59

您可以使用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"); 
       }  
      }); 
     }); 
    });

来源

2012-02-09 10:25:57 ParPar

jQuery的工具提示 - 点击以打开并单击以关闭

回答

相关问题