0

我设计了一个 h2 标签，并使用 jQuery 将它变成了一个按钮。单击时，隐藏的内容将从该按钮下方滑落。我的问题是效果的顺序，我无法让它们定时正确。

这是我希望它看起来的样子：

  1. 该按钮有圆角。单击时，底部的圆角会被移除，因此看起来隐藏的内容正在滑出按钮的底部。

  2. 再次单击按钮时，内容会向上滑入按钮中。当内容完成向上滑动时，按钮恢复其所有圆角的外观。

在我的jfiddle 模型上有 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() 或回调的帖子，但我一定不知道我在做什么，因为我无法让它工作。有什么建议么？

4

2 回答 2

0

而不是使用切换，只需.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/

于 2013-03-04T22:50:12.647 回答
0

您可能需要检测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');
    }   
});
于 2013-03-04T22:52:34.640 回答