カスタムjQueryアコーディオンがダブルクリックで変わっています

Question

jQueryを使用してシンプルなアコーディオンを作成していますが、今のところうまく見えますが、ダブルクリックすると変わってしまいます。ちょうどそれ自体を閉じるのではなく、クリック回数に応じて開閉を開始します。 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> 

ありがとう。

Answer 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();           
    }); 
})(); 

DEMO：http://jsfiddle.net/JJsb4/

UPDATE：セクションが第二のクリックで閉じ作成するには、交換する必要があります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();           
    }); 
})(); 

Answer 2

.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'); 
     });        

    }); 
})(); 

これは実行する必要があるため、イベントはキューに入れられません。

Answer 3

Hiyaこの作業デモhttp://jsfiddle.net/r9nw8/

を参照してください、あなたが探しているものを、このですか？私はブルッフを知らせてください！

注：このサンプルでは、​​私が上下に行うとしslideToggle() APIを使用していますさらにsecond click &上のオプションを閉じます。

のjQueryコード

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

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

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


    }); 
})(); 
​ 

Answer 4

あなたは人気のさえずりブートストラップライブラリを見て検討する必要があります。

それは時間の節約と最高のケースではありません崩壊/アコーディオン

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