Question

我正在尝试切换高度可能不同的div的高度。我想在用户点击按钮时将其切换到原始高度的10％，并在单击后打开时将其切换为100％。我还需要更改箭头的类以反映当前的切换状态。我无法确定第二部分。任何小孩都会非常感激。

这是我到目前为止所得到的......

function togglePracticeDrills() {
    $("#drillHelpSlide").animate({height:"10%"});
    $(".arrow").addClass("minimized");
};

谢谢！

Answer 1

function togglePracticeDrills() {
  var origHeight = $('#drillHelpSlide').data('origHeight');

    if (origHeight) {
        $('#drillHelpSlide').removeData('origHeight');
        $('#drillHelpSlide').animate({height: origHeight});
    } else {
        origHeight = $('#drillHelpSlide').height();
        $('#drillHelpSlide').data('origHeight', origHeight);
        $('#drillHelpSlide').animate({height: origHeight * 0.1});
    }

    $(".arrow").addClass("minimized");
};

http://jsfiddle.net/RsceU/

Answer 2

你可以试试这个。此处div高度为300px。

function toggleDiv(){
var dv5 = document.getElementById('<%= Div5.ClientId %>');

if($(dv5).height()=="300")

        {
            $(dv5).css("height","30px");
        }
        else
        {
            $(dv5).css("height","300px");
        }
}

Answer 3

尝试这样的事情：

function togglePracticeDrills() {
    constant originalHeight = ORIGINAL_HEIGHT_HERE;
    var tenPercentHeight = 0.1 * originalHeight;

    if ($(".arrow").hasClass("minimized")) {
        $("#drillHelpSlide").animate({height: originalHeight});
        $(".arrow").removeClass("minimized");
    } else {
        $("#drillHelpSlide").animate({height: tenPercentHeight});
        $(".arrow").addClass("minimized");
    }
}

Answer 4

您可以尝试这样的事情：

var slideHeight = $("#drillHelpSlide").height();
$("#drillHelpSlide").animate({ height: (slideHeight / 10) });

这是一个有效的例子：

<script type="text/javascript">
    $(function() {
        $("#collapse").click(function() {
            var elHeight = $("#test").height();
            $("#test").animate({ height: (elHeight / 10) });
        });
        $("#expand").click(function() {
            $("#test").animate({ height: "300px" });
        });
    });
</script>
<div id="test" style="height:300px;border:1px solid #ccc;">
    Hello world!
</div>
<input type="button" id="collapse" value="Collapse" />
<input type="button" id="expand" value="Expand" />

Answer 5

function togglePracticeDrills() {
    var $slide = $('#drillHelpSlide');
    // I'm assuming .arrow is withing #drillHelpSlide, as you probably need to limit the selector somehow.
    var $arrow = $('.arrow', $slide);

    var slideHeight = $slide.height();

    if (!$arrow.hasClass('minimized')) {
        $slide.data('originalHeight', slideHeight);
        $slide.animate({height:slideHeight/10});
        $('.arrow').addClass("minimized");
    } else {
        var originalHeight = $slide.data('originalHeight');
        $slide.animate({height:originalHeight});
        $('.arrow').removeClass("minimized");
    }
};

Answer 6

你可以这样做：

var height = $('#drillHelpSlide').height() / orig_height;
var new_height = (height % 100) * 10;
$("#drillHelpSlide").animate({height: new_height + "%"});

这可行，因为100 % 100 = 1; 10多次为您提供10。 10 % 100 = 10;乘以10可以得到100。

使用jQuery切换div的高度

6 个答案: