jQuery的div擴展高度不起作用

我的jQuery有一點問題。我想要它擴大div元素的高度，但似乎無法舔它。我使用下面的腳本：jQuery的div擴展高度不起作用

<script> 
$('.button').click(function(){ 
$('#footer_container').animate({height:'150px'}, 500); 
}); 
</script>

其中「.button」是該類觸發動畫的超鏈接：

‘#footer_container’是應該從擴大960x75像素到150像素的股利。

我在我的文檔的頭部使用

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

。它是錯誤的附件（我正在使用它在我在頁面上運行的其他幾個腳本）？我失蹤的東西？ I've posted the prototype on my test website。它是底部藍色欄上的矩形按鈕，其內容如下：點擊查看我們的會員資格。因爲當你的腳本執行的元素，它應該擴大div來顯示額外的內容，但什麼都不做:-(

任何人有任何想法？非常感謝！

來源

2013-09-21 adamdesign

您的罪魁禍首是你註冊你的元素之前處理的任何結果出現在DOM中，最終你的.button沒有得到因爲該元素在腳本執行時尚未存在，所以附加到它的點擊處理程序。

<div id="memberships"> 
<script> 
$('.button').click(function(){ 
    $('#footer_container').animate({height:'150px'}, 500); 
}); 
</script> 
<a href="#" class="button">Click to see our memberships.</a> 
</div>

它始終是一個安全的賭注就是將其附加在文件準備好處理。即$(function(){...});並將其放置在您的頁面或外部js文件中的任何位置。因爲只有存在的文檔已準備好且元素可用時纔會加載它。

所以，你會怎麼做：

$(function(){ 
    $('.button').click(function(e){ 
     e.preventDefault(); //just prevent the default behavior of the hyperlink 
     $('#footer_container').animate({height:'150px'}, 500); 
    }); 

});

此外，它通常是一個不好的做法，混淆了與腳本的HTML。這是很難維護和可以顯示不可預知的行爲。

來源

2013-09-21 02:20:09 PSL

尤里卡！有用！！！非常感謝 – adamdesign

@adamdesign歡迎.. :) – PSL

的代碼應該是在DOM準備好處理程序.button還沒有添加到DOM，所以選擇不會返回結果的事件處理程序將不會連接到.button元素

jQuery(function(){ 
    $('.button').click(function(e){ 
     e.preventDefault(); 
     $('#footer_container').animate({height:'150px'}, 500); 
    }); 
})

來源

2013-09-21 02:18:51

jQuery的div擴展高度不起作用

回答

相關問題