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>

但是这会扩展到最大高度。我甚至尝试在脚本中设置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

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

Answer 3

function () {
    height: 500px
}

对.animate();

不正确

这样做

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

DEMO

Animate documentation

Answer 4

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


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

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

                       </script>

Answer 5

试试这个

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

            });
        });

    });

Div展开点击JQuery

5 个答案: