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;

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

2 个答案: