jquery - Div クリックで展開 JQuery

Question

私はdivタグを持っています:

<div id="tier1" class="tier1" >
    <a href="#" class="view">View All</a>
    </div>


.tier1 {
    border-bottom: 1px solid #cccccc; 
    min-height: initial; 
    max-height: 245px; 
    padding: 0 0 8px;
}

max-heightそして、クリックするたびにこのdivを拡張したい"View All"

私はこのスクリプトを使用しています:

<script>
                            $(document).ready(function () {


                                $('.view').click(function () {

                                    $('#tier1').animate(function () {
                                      height : 510 ;
                                    }, 1000);
                                });
                            });

                       </script>

しかし、これは max-height までしか拡張されません。スクリプトで maxHeight プロパティを設定しようとしましたが、スクリプトはまったく機能しませんでした。

Answer 1

これを試して

 $(document).ready(function () {
        $('.view').click(function () {
            var toggle_switch = $(this);
            $("#tier1").toggle(function () {

            });
        });

    });

Answer 2

function () {
    height: 500px
}

は不正解です.animate();

代わりにこのようにしてください

  $('#tier1').animate({
       height: 500
  }, 1000)

デモ

ドキュメントをアニメーション化する

Answer 3

<script>
                            $(document).ready(function () {


                                $('.view').click(function () {

                                    $('.tier1').animate(function () {
                                      $(this).css('max-height','510px');
                                    }, 1000);
                                });
                            });

                       </script>

Answer 4

Amigo、あなたはdivを新しい高さに拡張していますが、クラスは同じままで、クラスを拡張していないため、定義された最大高にとどまります。したがって、この場合、div またはその両方の代わりにクラスを展開する必要があります。