jQuery Flyout 面板不会关闭

Question

我制作了这个弹出式联系面板。在我把它放到我的 Wordpress 网站之前它工作得很好，然后它根本拒绝工作。这是它应该做的：

http://jsfiddle.net/XwTpE/1/

我发现如果我把jQuery(document).ready放在开头，它开始工作，但现在它不会关闭！当您点击关闭按钮时，它会重新打开。事实上，我注意到您在页面上单击的任何位置都会导致它重新打开。在此处查看演示：

http://jsfiddle.net/q9b7M/1/

希望这很容易解决！任何帮助表示赞赏。谢谢！

Answer 1

你需要：

jQuery(document).ready(function() {
  jQuery('#contactFlyout').click(function()
 {
    jQuery(".togglepanel:visible").hide();
    jQuery("#contact_panel").animate({width:'toggle',height:'toggle'},200 );
});

// the close button
$('.closeDiv').click(function()
 {
    jQuery(".togglepanel:visible").animate({width:'toggle',height:'toggle'},200 );

});
});

见：http://jsfiddle.net/DcRHh/2/

或者您可以使用 Fabricio 指出的速记。虽然我会在 Wordpress 中坚持使用 jQuery 而不是 $，除非你知道在避免与其他脚本冲突时你在做什么。

Answer 2

这不是你使用DOM Ready handler的方式：

jQuery(function ($) { //shorthand for DOM Ready, put your code inside of it
  $('#contactFlyout').click(function () {
    $(".togglepanel:visible").hide();
    $("#contact_panel").animate({
      width: 'toggle',
      height: 'toggle'
    }, 200);
  });
  $('.closeDiv').click(function () {
    $(".togglepanel:visible").animate({
      width: 'toggle',
      height: 'toggle'
    }, 200);
  });
});

Fiddle

特殊的jQuery(function($){}) 语法对 WP 非常有用，因为它在 DOM 就绪处理程序范围内将 jQuery 别名回$。如果您不想一遍又一遍地输入jQuery，这将非常有用。