Question

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

Answer 1

你在jQuery UI中检查了手风琴吗？

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

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

如果没有帮助

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

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
    }
}

我们可以看到来自$divref的{{1}}实际上是slideengine()中以下行中的jQuery对象：

init()

因此，我们可以得出结论，该网站使用jQuery this.$divref=$('#'+this.id)：

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

通常情况下，找出确切的内容并不容易，因为网站不会提供其代码的非缩小和评论版本...

注意：如果我不想发布上述代码，请有人告诉我。

修改

正如其他人所说，你可以使用jQuery UI的accordion。另一个选择是使用jQuery的slideToggle()。

将div的高度设置为原始高度

2 个答案: