0

リンクをクリックすると滑らかな高さのアニメーションが表示されるサイトhttps://nationalskillsregistry.com/pos-details-register.htmに出くわしました(例: アーメダバード)。slideUp()これはjqueryの機能ではないと思います。多くの Web サイトを検索しましたが、ブロックの高さをアニメート0pxして元の高さに戻す方法が見つかりませんでした。そうする方法はありますか？

4

2 に答える 2

2

jQuery UI でアコーディオンを確認しましたか?

一度に複数のアコーディオンを開く必要があるため、これを試してください

デモ: http://jsfiddle.net/apSsR/8/

それが役に立たない場合

Accordian に似ているが、一度に複数のセクションを開くことができる JQuery プラグインを探しています

于 2012-08-08T18:12:17.573 に答える
1

animate()Webサイトは、回りくどい方法ではありますが、jQueryを使用しているようです。

ページソースから：

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

したがって、WebサイトはjQueryを使用していると結論付けることができますanimate()。

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

ウェブサイトはそのコードの縮小されていないコメント付きのバージョンを提供する傾向がないため、通常、正確に何が起こっているのかを知ることはこれほど簡単ではありません...

注：上記のコードを投稿する予定がない場合は、誰かに知らせてください。

編集：

他の人が述べているように、jQueryUIを使用できますaccordion。別のオプションは、jQueryのを使用することslideToggle()です。

于 2012-08-08T18:17:14.663 に答える