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/

或者你可以使用速記由法布里西奧指出。儘管我會堅持使用jQuery over $內部的Wordpress，除非你知道你在做什麼，以避免與其他腳本的衝突。

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非常有用，因爲它別名jQuery的回$的DOM準備處理範圍內。如果您不想一次又一次地輸入jQuery，這非常有用。