jquery - 将div的高度动画到其原始高度

Question

我遇到了一个网站https://nationalskillsregistry.com/pos-details-register.htm，当我点击链接（例如艾哈迈达巴德）时，我找到了平滑的高度动画。我想这不是slideUp()jquery 的功能。我搜索了许多网站，但没有找到一种方法将块的高度设置为0px然后返回到其原始高度。有什么办法吗？

Answer 1

你检查过 jQuery UI 中的手风琴吗？

由于您一次需要打开多个手风琴，请尝试此操作

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

如果那没有帮助

正在寻找类似于 Accordian 的 JQuery 插件，但允许同时打开多个部分

Answer 2

该网站似乎使用 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
    }
}

我们可以从以下行中看到$divreffromslideengine()实际上是一个 jQuery 对象init()：

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

因此，我们可以得出该网站使用 jQuery 的结论animate()：

http://api.jquery.com/animate/

通常要找出到底发生了什么并不容易，因为网站不倾向于提供其代码的非缩小和注释版本......

注意：如果我不应该发布上面的代码，那么请告诉我。

编辑：

正如其他人所提到的，您可以使用 jQuery UI 的accordion. 另一种选择是使用 jQuery 的slideToggle().