通过javascript切换div大小_Javascript_Jquery_Toggle

通过javascript切换div大小

javascript jquery

通过javascript切换div大小,javascript,jquery,toggle,Javascript,Jquery,Toggle,我正在尝试使用javascript来切换div的大小。为了理解如何做到这一点的基本思想，我尝试复制以下示例：但由于某种原因，它不起作用，尽管我从正在工作的JSFIDLE复制了它。为什么呢？这是我的复制品： <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

我正在尝试使用

javascript

来切换

div

的大小。为了理解如何做到这一点的基本思想，我尝试复制以下示例：

但由于某种原因，它不起作用，尽管我从正在工作的JSFIDLE复制了它。为什么呢？这是我的复制品：

<!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>


#顶栏{
背景：橙色；
颜色：白色；
高度：10px；
文本对齐：居中；
}
$（“#顶栏”）。单击（（函数（）{
var i=0；
返回函数（）{
$（此）。设置动画({
高度：（++i%2）？40:10
}, 200);
}
})());
切换我

哇您根本没有添加jQuery！在调用脚本之前，将其添加到

中

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

您正在使用

此

而不是在上下文中。当你把它放在一个函数里，它就会变得一团糟。这样做：

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

您使用的

此

将以您的内部功能作为其上下文。由于您的

位于

之后，请将其放入

$（函数（）{}）

哇您根本没有添加jQuery！在调用脚本之前，将其添加到

中

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

您正在使用

此

而不是在上下文中。当你把它放在一个函数里，它就会变得一团糟。这样做：

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

您使用的

此

将以您的内部功能作为其上下文。由于您的

位于

之后，请将其放在

$（函数（）{}）

中。很抱歉，这太可惜了。@FurkanO很抱歉，伙计。真的很抱歉。@PraveenKumar谢谢你指出我的错误。现在，有一个后续问题：当前脚本使用绝对像素值切换div的宽度。我如何使用百分比值呢？@JoSch你可以用

替换

px

中的大小，它应该可以工作。对不起，那太可惜了。@FurkanO对不起，伙计。真的很抱歉。@PraveenKumar谢谢你指出我的错误。现在，有一个后续问题：当前脚本使用绝对像素值切换div的宽度。我如何使用百分比值呢？@JoSch您只需将

px

中的大小替换为

就可以了。