如何切换div的高度答案

【问题标题】：How do I toggle the height of a div如何切换div的高度
【发布时间】：2012-01-03 19:59:28
【问题描述】：

所以我希望一个 div (#more) 在单击另一个 div (#clck) 后将其高度从 105px 更改为 25px。我是这样做的：

 <script type="text/javascript">
$("#clck").click(function () {
$("#more").css("height", "325");
});
</script>

但在第一次点击后，它不会回到初始高度。我试过toggleClass，但它不起作用。

谁能帮我做这个？

【问题讨论】：

你希望它什么时候回到初始高度？？？？
Toggle height of div using jQuery 的可能重复项
@dku.rajkumar，再次点击。我已经检查了关于此的其他帖子，但我遇到了问题。
检查我的答案...这可能对你有帮助

标签： jquery height

【解决方案1】：

尝试在新的 CSS 类中设置高度并使用 toggleClass 切换该类。

示例：
HTML：

<div id="myDiv">...</div>

CSS：

#myDiv {
   height: 105px;
}

#myDiv.expanded {
   height: 325px
}

JS：

$("#myDiv").toggleClass("expanded");

【讨论】：

【解决方案2】：

Toggle height of div using jQuery。可以将 .data() .removeData() 与 if/else 一起使用，就像这个人简单演示的那样

【讨论】：

【解决方案3】：

看看jsfiddle demo

$("#clck").click(function () {
    if($("#more").css("height")=="105px") // check for height
        $("#more").css("height", "325");
    else
        $("#more").css("height", "105");
});

【讨论】：

【解决方案4】：

如果您想在每次点击时调整高度，您可以使用标志变量来记住当前高度。

var flag = false;
$("#clck").click(function(){
    if(flag){
        $("#more").css("height", "325");
        flag = false;
    }
    else{
        $("#more").css("height", "105");
        flag = true;
    }
});

【讨论】：