使用jQuery切换div的高度 [英] Toggle height of div using jQuery

问题描述

我正在尝试切换div的高度，该高度可以变化.我想在用户单击按钮时将其切换为原始高度的10％，并在单击后重新打开时将其切换为原始高度的100％.我还需要更改箭头的类别以反映当前的切换状态.我还没有确定第二部分.任何幼兽都将不胜感激.

I am trying to toggle the height of div that can vary in height. I want to toggle it to 10% of it's original height when the user clicks the button and 100% when clicked back open. I also need to change the class of an arrow to reflect the current toggle state. I haven't been able to nail down the second part. Any whelp would be greatly appreciated.

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

Here is what I got so far...

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

谢谢！

推荐答案

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/

这篇关于使用jQuery切换div的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！