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