Question

我正在创建一个show more按钮来扩展div“expandable”

以下代码可以正常工作，但在用户点击文档中的ANYWHERE时可以使用。

$(document).click(function() {
    $('.expandable').animate({
      'height': '100%',
    })
})

下面的代码应该我相信吗？当用户点击div“show-more-btn”但它没有：

$('#show-more-btn').click(function() {
    $('.expandable').animate({
      'height': '100%',
    })
})

编辑：（评论代码）

<div id="show-more-btn"> 
    <p>Show More</p> 
    <img src="images/show-more.png" alt="" /> 
</div>

加载时控制台或点击或任何内容都没有错误..

Answer 1

$('#show-more-btn').click(function () {
    $('.expandable').animate({
        'height': '100%'
    })
})

您错过了选择器中的'

Fiddle

Answer 2

$('#show-more-btn').click(function() {
    $('.expandable').animate({
      'height': '100%'
    });
});

试试这个：我认为你在两个函数的末尾错过了分号。

Answer 3

鉴于您已经提到相同的代码适用于$(document).click，我认为应该有一个class='expandable'的元素。我能看到的唯一其他问题是您的代码位于<head>部分，并未包含在$(document).ready(function(){中。

包装如下所示:( 事件处理程序应在元素创建并可用后分配）

$(document).ready(function(){
    $('#show-more-btn').click(function() {
        $('.expandable').animate({
          'height': '100%',
        });
    });
})

基本Javascript帮助 - Click事件

3 个答案: