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

试试这个代码

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

            $('div.cls:first')
            $('.view').click(function () {
                $('#tier1.tier1').css("max-height", "1024px");
                $('#tier1').css("height", "510px").animate(function () {

                }, 1000);
            });
        });

                       </script>

Answer 2

尝试这个

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

            });
        });

    });

Answer 3

function () {
    height: 500px
}

不正确.animate();

改为这样做

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

演示

动画文档

Answer 4

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


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

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

                       </script>

Answer 5

朋友，你正在将你的 div 扩展到一个新的高度，但是你的类保持不变，你没有扩展类，所以它保持在定义的最大高度。因此，在这种情况下，您必须扩展类而不是 div 或两者兼而有之。