2

コード：

<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 です。

4

2 に答える 2

3

最善の解決策ではないかもしれませんが、div の高さによっては次のように動作します。

jQuery/JavaScript:

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

CSS:

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

jsフィドル

于 2013-09-06T16:58:35.323 に答える