自定義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：爲了使第二單擊該節結束時，您需要交換大約兩條線。所以最終的版本將是：

(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

你好，請參閱該工作演示http://jsfiddle.net/r9nw8/

這是你在找什麼？請讓我知道布魯夫！

注：此示例將關閉在second click &進一步我使用slideToggle() API做上下的選項。

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

你可能要考慮在看流行的Twitter自舉庫。

它是節省時間和有很多功能，包括摺疊/手風琴

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