0

リンク「このページにさらに追加」と「場所の設定」スライドが対応するdivを開き、関連するコンテンツを表示するBBCホームページに表示される効果を再現しようとしています。「このページにさらに追加」を選択すると、「さらに追加」セクションがスライドして開きます。[このページにさらに追加] を再度選択すると、[さらに追加] セクションが閉じます。ただし、[さらに追加] セクションが開いているときに [場所の設定] を選択すると、[場所の設定] を下にスライドする前に [さらに追加] セクションが上にスライドします。

次のコードを使用して、この効果を再現することができました。

HTML

    <ul id="demo">
        <li><a href="#sectionOne">Link One <span class="rm">this site</span></a></li>
        <li><a href="#sectionTwo">Link Two</a></li>
        <li><a href="#sectionThree">Link Three</a></li>                 
    </ul>

    <div id="siteCustomisation">
        <div class="siteSelection" id="sectionOne">
            <h3>Section One</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue tincidunt tortor, id condimentum massa scelerisque id. Cras elit magna, posuere at sollicitudin in, tristique nec turpis.</p>
        </div>
        <div class="siteSelection" id="sectionTwo">
            <h3>Section Two</h3>
            <p>Maecenas condimentum tincidunt pretium. Ut est ipsum, pharetra quis congue eu, eleifend vitae velit. Vestibulum quam purus, posuere quis vehicula ut, sollicitudin vel urna.</p>
        </div>
        <div class="siteSelection" id="sectionThree">
            <h3>Section Three</h3>
            <p>Nulla id nisi eget urna gravida euismod. Mauris tempor, diam ullamcorper sagittis eleifend, urna mauris scelerisque massa, placerat sagittis massa augue nec purus.</p>
        </div>                                  
    </div>

Jクエリコード

$(function(){
    $("#siteCustomisation .siteSelection").hide();

    $("#demo li a").each(function(index) {
        $(this).click(function() {  
            var id = $(this).attr('href');
            var $thisDiv = $(id);

            if ($thisDiv.siblings(':visible').length) { 
                $thisDiv.siblings(':visible').slideUp(700, function() {
                    $thisDiv.slideDown();
                });
            } else {    
                $thisDiv.slideToggle();         
            }
            return false;
        });
    });     
});

問題は、誰かがリンク 1 をクリックしてからリンク 2 をすばやくクリックすると、両方の div がページに表示されることです。常に 1 つのセクションのみを表示する必要があります。この問題を解決する方法はありますか?

ご協力ありがとうございました。

4

2 に答える 2

5

ここに簡単なデモがあります。基本的に、:animated セレクターを使用して、次の slideDown に進む前に、div のいずれかが現在アニメーション化されているかどうかをテストできます。

また、.live の使い方にも注意してください。これは、同じイベント ハンドラーを複数の要素にアタッチするよりも望ましい方法です。

nb テキスト ジャンプは無視してください。これは css が不足しているためです。

于 2009-06-24T11:06:50.267 に答える
1

スライドの開始時にクリック イベントを無効にし、スライドの完了時に再度有効にすることができます。さらに簡単に、グローバル変数を「ロック」として使用できます。スライドが始まると false に設定し、スライドが終了すると true に再設定します。変数が false の場合、div のスライドを許可しません。すべてのアニメーションにコールバックを使用する必要があります。

次のようなものを使用できます。

animationStarted = true;
$thisDiv.slideToggle(function() {   
   animationStarted = false; 
});

すべての「アニメーション」メソッド (slideToggle、slideDown) は、引数としてコールバック関数を受け入れます。これは、実行する効果が完了すると呼び出されます。

于 2009-06-24T10:54:35.720 に答える