0

jQueryを使用して単純なアコーディオンを作成していますが、これまでのところ見栄えは良いですが、ダブルクリックまたは2回以上クリックした場合でも奇妙な動作をします。それ自体を閉じるだけでなく、クリックされた回数に応じて開閉を開始します。if(!hasbeenclicked) のような変数を実装することを考えましたが、それが機能するかどうかはわかりません。したがって、基本的には、ダブルクリックを防止し、同じオプションをもう一度クリックした場合に、それ自体を閉じる方法を考えています。

ここにライブデモがありますhttp://jsfiddle.net/qBD5D/

私の現在のコード:

JavaScript

(function(){       

    $('#accordion h3').click(function(e){

        e.preventDefault();       
        $('#accordion div').slideUp();
        $(this).next('div').slideDown();                               

    });
})();

html

<div id="accordion">
  <h3>Accordion option text</h3>
  <div>hello world</div>
  <h3>Accordion option text</h3>
  <div>hello world</div>
  <h3>Accordion option text</h3>
  <div>hello world</div>
  <h3>Accordion option text</h3>
  <div>hello world</div>
</div>

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

4

4 に答える 4

3

これを探して.stop()いると、オブジェクトのすべての jquery アニメーションが停止します。アニメーションを開始する直前にこれを起動します。

(function(){       

    $('#accordion h3').click(function(e){

        e.preventDefault();       
        $('#accordion div').stop().slideUp();
        $(this).next('div').stop().slideDown();                               

    });
})();

試してみると、気分が良くなるはずです。

その解決策が気に入らない場合は、いつでも待機機能を使用できるため、アニメーションが完了するまでアニメーションをトリガーできません。彼らはそのようにまったく発砲しないため、キューに入れません。

更新：

次のアニメーションを起動する前に待機させるには、アニメーションの開始時にクラスを追加し、停止時にクラスを削除するタイミングを示すフラグが必要です。イベントの発生をまったく停止したため、イベントはキューに入れられません。

(function(){           
    $('#accordion h3').click(function(e){            
        e.preventDefault();
        if ($('#accordian h3.sliding').length > 0)
            return false;

        var me = $(this);
        me.addClass('sliding');                  

        //slide up the currently shown div, no need to inefficiently 
        //fire this on all  child divs
        $('#accordion div.shown').slideUp().removeClass('shown');

        //slide the corresponding div down and add and remove the 
        //right classes when it's finished
        $(this).next('div').slideDown(500, function(){
             $(this).addClass('shown');
             me.removeClass('sliding');
        });                               

    });
})();

それをするなんてとんでもない。

于 2012-05-04T07:59:46.213 に答える
3

解決策の 1 つは、既に表示されているスライドを無効にすることdivです。

(function(){        
    $('#accordion h3').click(function(e){                        
        e.stopImmediatePropagation();                
        e.preventDefault();        
        var div = $(this).next('div');
        if (div.is(":visible")) return;
        $('#accordion div').slideUp();
        div.slideDown();                                        
    });
})();

デモ: http://jsfiddle.net/JJsb4/

更新: 2 回目のクリックでセクションを閉じるには、2 行前後を入れ替える必要があります。したがって、最終バージョンは次のようになります。

(function(){        
    $('#accordion h3').click(function(e){
        e.stopImmediatePropagation();     
        e.preventDefault();        
        var div = $(this).next('div');
        $('#accordion div').slideUp();  // these lines
        if (div.is(":visible")) return; // are swapped
        div.slideDown();                                        
    });
})();
于 2012-05-04T08:01:41.327 に答える
2

人気のある Twitter ブートストラップ ライブラリを検討することをお勧めします。

時間を節約し、折りたたみ/アコーディオンを含む多くの機能を備えています

http://twitter.github.com/bootstrap/javascript.html#collapse

于 2012-05-04T09:15:37.067 に答える
0

こんにちは、この動作中のデモ をご覧くださいhttp://jsfiddle.net/r9nw8/

これはあなたが探しているものですか？教えてくださいブラブラ！

注:このサンプルでは、second click​​さらにslideToggle()API を使用して上下にオプションを閉じます。

Jクエリコード

(function(){        
    $('div#accordion > h3').click(function(e){    

        e.preventDefault();  
        if($(this).next('div').is(":hidden"))
           $("#accordion > div").slideUp();

         $(this).next('div').slideToggle();          


    });
})();
​
于 2012-05-04T08:30:08.850 に答える