jquery - jQuery Flyout 面板不会关闭

Question

我构建了这个弹出式联系面板。它运行良好，直到我将它放入我的 Wordpress 网站，然后它根本拒绝运行。这是它应该做的：

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

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

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

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

Answer 1

这不是您使用DOM Ready 处理程序的方式：

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);
  });
});

小提琴

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

Answer 2

你需要：

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 而不是 $，除非你知道在避免与其他脚本冲突时你在做什么。