使用jQuery切换div的高度

问题描述：

我想切换高度可以变化的div的高度。我想在用户点击按钮时将其切换到原始高度的10％，并在单击返回打开时将其切换到100％。我还需要更改箭头的类以反映当前的切换状态。我一直无法确定第二部分。任何whelp将不胜感激。使用jQuery切换div的高度

这是我走到这一步......

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

谢谢！

是否要将高度更改为'10％'，或更改为当前高度的1/10？ – JJJ

我想将高度改为当前高度的10％。 – Bingles

答

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/

This works great ..非常感谢您的帮助！非常感谢！ – Bingles

答

尝试这样：

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"); 
    } 
}

答

你可以尝试这样的事：

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" />

答

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"); 
    } 
};

答

你可以这样做这个：

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。

答

你可以试试这个。这里div高度是300px。

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

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

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

使用jQuery切换div的高度

相关推荐