通过 javascript 切换 div-尺寸

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-尺寸

Toggling div-size via javascript

javascript

jquery

toggle