Jquery表示/非表示の切り替え

StackOverflow https://stackoverflow.com/questions/1037632

  •  10-07-2019
  •  | 
  •  

質問

リンクを「このページに追加」および「場所を設定」スライドで対応する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>

Jqueryコード

$(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つのリンクがページに表示されることです。常に1つのセクションのみを表示する必要があります。この問題を解決する方法はありますか？

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

役に立ちましたか？

解決

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

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

n.bテキストのジャンプは無視してください。これはcssがないためです

他のヒント

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

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

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

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top