自定义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