Question

我设计了一个h2标签，并使用jQuery将其转换为各种按钮。单击时，隐藏的内容将从此按钮下方向下滑动。我的问题是效果的顺序，我无法让它们定时。

以下是我希望看到的内容：

按钮有圆角。单击时，底部的圆角将被删除，因此看起来隐藏的内容从按钮底部滑出。
再次单击该按钮时，内容会向上滑动到按钮中。当内容完成向上滑动时，按钮将恢复其所有圆角的外观。

在我的jfiddle mockup上有2个示例按钮。示例1适用于第一次单击，但按钮在内容再次单击时向上滑动之前变为圆形。

单击Example2时，按钮会在内容滑出时保持圆形。但是再次单击以隐藏内容时，序列将按正确的顺序运行。

这是要点：

$('.section').hide();


$('.example1').click( function(event) {
    event.preventDefault(); 

    $(this).next().slideToggle('slow')
    .prev().toggleClass('open-header');    
});


$('.example2').click( function(event) {
    event.preventDefault();

    $(this).next()
        .slideToggle('slow')
        .queue( function(next) {
            $(this).prev().toggleClass('open-header');
            $(this).dequeue();
        }); 
});

我想结合每个按钮的工作部分，但我不知道如何。我阅读了关于使用.queue（）或回调的其他帖子，但我一定不知道我在做什么因为我无法让它工作。有什么建议吗？

Answer 1

而不是使用切换，只需手动检查它是否有.open-header类，当向上滑动时，删除回调上的类：

$('.example1').click( function(event) {
    event.preventDefault(); 
    if(!$(this).hasClass('open-header')) {
      $(this).addClass('open-header');
        $(this).next().slideDown('slow');
    } else {
        $(this).next().slideUp('slow',function() {
           $(this).siblings('h2').removeClass('open-header');
        });

    }
});

更新小提琴：http://jsfiddle.net/WsE8R/5/

Answer 2

您可能需要检测函数中open-header类的存在并更改操作的顺序。您需要在打开时首先切换类，然后在关闭时需要它。

这样的事情：

$('.example1').click( function(event) {
    event.preventDefault();

    if($(this).hasClass('open-header')) {
        // we need to close it
        $(this).next().slideToggle('slow').prev().toggleClass('open_header');
    } else {
        // we need to open it
        $(this).toggleClass('open_header').next().slideToggle('slow');
    }   
});

jQuery可点击元素的效果序列

2 个答案: