0

我正在使用 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>

谢谢你。

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

解决方案之一是禁用已经可见的滑动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/

更新：要使该部分在第二次单击时关闭，您需要交换两行。所以最终版本将是：

(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 进行上下操作。

jQuery代码

(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 回答