javascript - 一键增减div高度

Question

我目前正在尝试通过单击一个按钮来扩大 div 的大小，然后在同一次单击中将其缩小为 0。我已经尝试了一些东西，但我已经将最近的尝试放入了这个 jsfiddle 中。任何人都可以指出正确的方向，说明为什么 div 既不扩展也不收缩吗？

这是最近尝试的代码以及 CSS 和 HTML。

$("dasButton").toggle(function(){
$("#div1").height($("#div1").height()+200);
},function(){
$("#div1").height($("#div1").height()-200);

});

});

CSS

#div1{
background-color:#8888ff;
display:block;
height:0px;
overflow:hidden;
    border: 1px solid #000;
 }

HTML

<input type="submit" class="toggle_div" id="dasButton" value="Enlarge/Shrink div"/><br>
<div id="div1">
display:block;
height:0px;
overflow:hidden;
    border: 1px solid #000;
}

http://jsfiddle.net/sen3t6vk/3/

Answer 1

我更改你的代码!

jQuery:

$("#dasButton").click(function(){
    var inputValue=$("#dasButton").attr('value');

    if(inputValue=="Expand")
    {
        $("#div1").animate({height:"200px"});
        $("#dasButton").attr('value','Reduce');
    }
    else if(inputValue=="Reduce")
    {
        $("#div1").animate({height:"0px"});
        $("#dasButton").attr('value','Expand');
    }
});

HTML:

<input type="submit" class="toggle_div" id="dasButton" value="Expand"/><br>
<div id="div1">

---

Live Demo on JSFiddle