javascript - 用于延长容器的 JQuery 动画不起作用

Question

我想在单击按钮时使我的一个 div 的长度更长，但是 jquery 似乎不起作用。这是脚本。

<script type="text/javascript">
 $(document).ready(function(){

    function extendContainer() {
        $('#thisisabutton').click(function() {
            $('#one').animate({
            height: "200px"
            },
            300);
        });
    }

})
</script>

这是 html，带有按钮的代码

<div id="div1" id="buttons" >
    <ul class="actions">
        <li><input id="thisisabutton" type="button" onclick="extendContainer()" onclick="loadXMLDocTraditional()" value="Traditional" class="special"/></li>
    </ul>
</div>

这里是 css 以防万一。

#one .container {
        width: 50em;
        height: 22em; /* Height of the #one section*/
}

Answer 1

您不需要 onclick="extendContainer()"属性或函数本身来使其工作，因为您是在附加处理程序而不是在调用 extendContainer() 时执行操作:

$(document).ready(function(){

    $('#thisisabutton').click(function() {
        $('#one').animate({
        height: "200px"
        },
        300);
    });

})

和

<div id="div1" id="buttons">
    <ul class="actions">
    <li><input id="thisisabutton" type="button" onclick="loadXMLDocTraditional()" value="Traditional" class="special"/></li>
    </ul>
</div>

应该够了