將div的高度設置爲原始高度

我遇到過一個網站https://nationalskillsregistry.com/pos-details-register.htm，在鏈接（例如Ahmedabad）上點擊鏈接時，我找到了平滑的高度動畫。我想這不是jQuery的slideUp()函數。我搜索了很多網站，但沒有找到一種方法來創建塊的高度爲0px，然後回到原來的高度。有沒有辦法做到這一點？將div的高度設置爲原始高度

來源

2012-08-08 Vicky

'slideUp'和'slideDown'正是用於這種類型的交互。 – 2012-08-08 18:31:43

@DA。是的，但是當我們使用'slideUp'和'slideDown'時，我們觀察到有內部元素的運動。但在我提到的鏈接中，高度的動畫是完美的。 – Vicky 2012-08-08 18:50:03

這通常是由於嵌套元素上的填充和邊距問題。解決方法之一是緩存渲染div的高度（例如將其存儲爲'.data（）'元素。然後你可以動畫到那個特定的高度。 – 2012-08-08 19:02:14

網站似乎使用jQuery animate()儘管處於迂迴狀態。

從頁面的源代碼：

<a href="javascript:animatedcollapse.toggle('ahmedabad')">Ahmedabad</a>

如果檢查animatedcollapse.js，你會看到toggle()功能：

toggle:function(divid){ //public method 
    if (typeof divid=="object") 
     divid=divid[0] 
    this.showhide(divid, "toggle") 
}

的toggle()功能使用showhide()：

showhide:function(divid, action){ 
    var $divref=this.divholders[divid].$divref //reference collapsible DIV 
    if (this.divholders[divid] && $divref.length==1){ //if DIV exists 
     var targetgroup=this.divgroups[$divref.attr('groupname')] //find out which group DIV belongs to (if any) 
     if ($divref.attr('groupname') && targetgroup.count>1 && (action=="show" || action=="toggle" && $divref.css('display')=='none')){ //If current DIV belongs to a group 
      if (targetgroup.lastactivedivid && targetgroup.lastactivedivid!=divid) //if last active DIV is set 
       this.slideengine(targetgroup.lastactivedivid, 'hide') //hide last active DIV within group first 
       this.slideengine(divid, 'show') 
      targetgroup.lastactivedivid=divid //remember last active DIV 
     } 
     else{ 
      this.slideengine(divid, action) 
     } 
    } 
}

showhide()又使用slideengine()：

slideengine:function(divid, action){ 
    var $divref=this.divholders[divid].$divref 
    if (this.divholders[divid] && $divref.length==1){ //if this DIV exists 
     var animateSetting={height: action} 
     if ($divref.attr('fade')) 
      animateSetting.opacity=action 
     $divref.animate(animateSetting, $divref.attr('speed')? parseInt($divref.attr('speed')) : 500) 
     return false 
    } 
}

我們可以看到，$divref從slideengine()實際上是從以下行jQuery對象中init()：

this.$divref=$('#'+this.id)

因此，我們可以得出這樣的結論網站使用jQuery的animate() ：

通常我t不會很容易找出究竟發生了什麼，因爲網站不傾向於提供非縮小和註釋版本的代碼...

注意：如果我不應該發佈上述代碼，那麼有人請讓我知道。

編輯：

正如其他人所提到的，你可以使用jQuery UI的accordion。另一種選擇是使用jQuery的slideToggle()。

來源

2012-08-08 18:17:14 Zhihao

偉大的工作！我認爲任何人都不會要求你隱藏這些代碼，因爲它是網站管理員的工作，以確保他的腳本是安全的（以某種方式）。你有沒有想過成爲一個網站分析師/檢查員？ – 2012-08-08 18:38:47

謝謝@Ghillied，不，我沒有真正想過。除了缺乏（我認爲）正確的專業知識和技能，我更願意寫代碼。 :) – Zhihao 2012-08-08 18:59:49

您是否在jQuery UI中檢查過手風琴？

既然你需要一個以上的手風琴一次打開試試這個

演示：http://jsfiddle.net/apSsR/8/

如果那不幫助

Looking for a JQuery plug-in similar to Accordian, but that allows multiple sections open at once

來源

2012-08-08 18:12:17

這就是jQuery UI – Alexander 2012-08-08 18:13:27

有一條消息說注意：如果您希望一次打開多個部分，請勿使用手風琴，手風琴不允許同時打開多個內容面板。但是在提到的鏈接中，我們一次可以看到多個部分。我估計手風琴可能無法完成所提到的網站中實現的動畫類型。 – Vicky 2012-08-08 18:17:15

@Vicky我已根據您的要求編輯答案。 – 2012-08-08 18:49:51

將div的高度設置爲原始高度

回答

相關問題