javascript - 在 JQuery 中再次单击时，如何将框高度返回到原始状态？

Question

代码：

<script type="text/javascript">
    $(document).ready(function () {

        $('.box').on('click', function (e) {
            e.preventDefault();
            var $btn = $(this);
            $btn.toggleClass('opened');

            var heights = $btn.hasClass('opened') ? 300 : 100;
            $(this).stop().animate({ height: heights }, 800);
            //$(".sync_store_info_input_holder").toggle();
        });
    });
</script>

CSS：

.box {
    background-color: #000000;
    height: 73px;
    width: 269px;
    margin: 40px 42px 0px 0px;
    cursor: pointer;
    text-align: center;
    line-height: 73px;
}

上面的函数可以正常工作，但是每当单击打开框并单击关闭框时，框的高度都会比初始状态高一点。这不是 CSS 问题，但脚本中的高度 100 似乎没有切换。我怎样才能使盒子关闭时高度恢复到原始状态？

问题：

即使在单击关闭框后，函数中的高度似乎100仍然存在。我怎样才能使它在盒子关闭时恢复盒子的原始高度。盒子的高度在 .box 类中，为 275px。

Answer 1

也许不是最好的解决方案，但取决于 div 高度这有效：

jQuery/JavaScript：

var heights = $btn.hasClass('opened') ? 300 : 200;

CSS：

.box {
  height: 200px;
  width: 200px;
  background-color: orange;
}

jsFiddle

Answer 2

将身高设置为 73。

将 100 更改为 73：

var heights = $btn.hasClass('opened') ? 300 : 73;