Question

我的jQuery有点问题。我希望它扩展div元素的高度，但似乎无法舔它。我正在使用以下脚本：

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

其中“.button”是触发动画的超链接的类：

“＃footer_container”是应该从75px扩展到150px的div。

我正在使用

<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以显示额外的内容，但什么都不做： - （

有人有什么想法吗？非常感谢!!

Answer 1

代码应该在dom ready处理程序中，因为在执行脚本时，元素.button尚未添加到dom中，因此选择器不会返回任何结果，因此事件处理程序将不会附加到.button元素

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

Answer 2

您的罪魁祸首是您在元素出现在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>

总是一个安全的选择是将它附加在Document ready处理程序中。即$(function(){...});并将其放在页面上或外部js文件中的任何位置。因为只有当文档所在的文档准备好并且元素可用时才会加载它。

所以你会这样做：

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

});

将html与脚本混合使用通常也是一种不好的做法。它难以维护并且可能显示出不可预测的行为。

jQuery div扩展高度不起作用

2 个答案: