使用jQuery切換div的高度

我想切換高度可以變化的div的高度。我想在用戶點擊按鈕時將其切換到原始高度的10％，並在單擊返回打開時將其切換到100％。我還需要更改箭頭的類以反映當前的切換狀態。我一直無法確定第二部分。任何whelp將不勝感激。使用jQuery切換div的高度

這是我走到這一步......

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

謝謝！

來源

2011-10-07 Bingles

是否要將高度更改爲'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/

來源

2011-10-07 15:19:35

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

來源

2011-10-07 15:06:46

你可以嘗試這樣的事：

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

來源

2011-10-07 15:12:01

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

來源

2011-10-07 15:17:34

你可以這樣做這個：

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。

來源

2011-10-07 15:18:49

你可以試試這個。這裏div高度是300px。

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

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

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

來源

2012-02-07 06:41:35

使用jQuery切換div的高度

回答

相關問題