Question

我建立了这个弹出式接触面板。它工作正常，直到我把它放入我的Wordpress网站，然后它拒绝工作。这是它应该做的：

我发现如果我把jQuery(document).ready放在开头，就会开始工作，但现在它不会关闭！当您点击关闭按钮时，它会重新打开。事实上，我注意到，无论你点击页面的任何地方，都会重新打开它。请参阅此处的演示：

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

Answer 1

这不是你使用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非常有用，因为它将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指出的速记。虽然我会坚持使用jQuery超过$ in Wordpress，除非你知道在避免与其他脚本发生冲突时你在做什么。

jQuery Flyout面板不会关闭

2 个答案: