1

ユーザーがタブをクリックしたときに展開可能なロールアウトを作成しようとしています。

これは基本的に 2 行のタブで、それぞれに独自の色があり、ユーザーがそのうちの 1 つをクリックすると、非表示の DIV がアニメーション表示されます。これを行うのが難しいとは思いませんが、ユーザーが別のタブを既に開いているときに別のタブをクリックすると、問題が発生します。次に、新しいコンテンツが既存のコンテンツの場所を追い越さなければなりません。

これは私がこれまでに持っているものです。 http://jsfiddle.net/craigzilla/W3afW/

                     4つの画像は、何が起こるべきかを表しています
                      タブ01、02、03、08をクリックすると
4

2 に答える 2

2

jsFiddle デモ

$(document).ready(function() {
    var $cont;    
    function tgl_conts(){
        $('.content').stop().animate({height: 0},1200);
        $cont.stop().animate({height:210},1200);
    }
    
    $('.tab').on('click',function(){
        var tabClass=$(this).attr('class').split(' ')[1];
        $cont = $('.'+tabClass+':not(.tab)');
        var h = ($cont.height() === 0) ? tgl_conts() :  ( $cont.stop().animate({height: 0},1200) );  
    });

});

気をつけて！！！すべての ID (CSS も) を削除し、重複のために別のクラスを追加しました。

.turquoiseそれぞれに 2 つの要素があり、それらを区別する必要があるため、.turquoise2
同じです。.pink .pink2

PS: 使い勝手がいい！素晴らしい表現、ナイス アイデア ブラザー!

EDIT
jQuery UI ライブラリの「速度」(アニメーション時間) とイージングの設定を追加しました。

イージング付きのデモ

于 2012-04-22T19:59:55.543 に答える
0

わかりました...基本的に、あなたがやりたい<div>のは、各タブ内に要素を含めることです。ユーザーがタブの1つをクリックすると、jQueryは他の「ポップアウト」div要素が表示されていないことを確認してから、対応するdivを表示します。

例として3つのタブを取り上げます-

<div class="tab" id="pink">
    <img src="http://placehold.it/160x160" width="160" height="160" />
    <span class="tab_text">TITLE 01</span>
    <div class="pop-out">Some pink information</div>
</div>
<div class="tab" id="turquoise">
    <img src="http://placehold.it/160x160" width="160" height="160" />
    <span class="tab_text">TITLE 02</span>
    <div class="pop-out">Some turquoise information</div>
</div>
<div class="tab" id="yellow">
    <img src="http://placehold.it/160x160" width="160" height="160" />
    <span class="tab_text">TITLE 03</span>
    <div class="pop-out">Some yellow information</div>
</div>

id属性を使用するたびに、それぞれが一意であることに注意してください。表示される属性が同じ値を持つことができるidのとは対照的に、属性は常に一意の値を持つ必要があります。classclass="pop-out"

  • pop-outすべてのポップアウトdiv要素を識別する方法になります
  • ユーザーがタブをクリックすると、クラスが追加されますsel（選択済みの略）。最後に開いたdiv（ある場合）を追跡し、新しいdivを開く前に必ず閉じてください。

ここで、トリガーをタブ全体にしたいとします。ユーザーがそれをクリックすると、どこでもポップアウトがトリガーされます。

$(".tab").on('click',function(){
  $("div.pop-out.sel").fadeOut().removeClass('sel'); // this will hide the last selected div and remove its selected class
  $(this).find("div.pop-out").fadeIn().addClass('sel'); // this will display the div of the element the user clicked and add the selected class.
}

もちろん、好きなアニメーションに置き換えることができます。

これで、-を使用して開いているタブを追跡することもできます。

$("div.pop-out.sel").closest("div.tab");

これにより、現在表示されているポップアウトdivの親が返されます。選択したdivが実際に最初に存在するかどうかをテストすることを忘れないでください :)

于 2012-04-22T19:23:56.397 に答える