Question

我尝试使用javascript来切换div的大小。为了理解如何执行此操作的基本思路，我尝试复制此示例：Toggling Div (JSFiddle)

但由于某种原因，它不起作用，尽管我已经从工作的JSFiddle中复制了它。这是为什么？这是我的复制品：

<!DOCTYPE html>
<html>

<head>

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <style type="text/css">#topbar {
    background: orange;
    color: white;
    height: 10px;
    text-align:center;
    }</style>

    <script type="text/javascript">

    $("#topbar").click((function() {
    var i = 0;
    return function() {
        $(this).animate({
            height: (++i % 2) ? 40 : 10
        }, 200);
    }
    })());

    </script>

</head>

<body>

<div id='topbar'>toggle me</div>


</body>

</html>

Answer 1

哇！你还没有添加jQuery！在调用脚本之前，在<head>中添加此内容。

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

您必须在控制台中出现此错误：

Reference Error: $ not defined.

您在上下文中使用this。当你把它放在一个函数中时，它就会被搞砸了。这样做：

$(function () {
    $("#topbar").click(function () {
        var i = 0;
        $(this).animate({
            height: (++i % 2) ? 40 : 10
        }, 200);
        return false;
    });
});

您使用的this将把您的内在功能作为其上下文。由于您的<div>位于<script>之后，请将其附在$(function () {})内。

通过javascript切换div大小

1 个答案: