SlideUp 所有 div &使用 jQuery 一键更改 h3 类

Question

我有一个简单的手风琴式机制，我一直在研究。我熟悉slideUp和slideDown的回调功能，并使用它来实现动画完成后类的更改。

我有 2 个按钮 - 一个展开手风琴中的所有 div，另一个折叠它们。这工作得很好，当仅使用这些按钮来控制手风琴时，类会在正确的时间更改。

但是，当我打开其中一个手风琴（通过单击 h3），然后单击按钮折叠所有 div 时 - h3 上的类立即发生变化（因此其外观也发生变化）。

一定是某个地方发生了冲突。我确信我的函数也不是我们专门编写的，但任何帮助将不胜感激。

谢谢

这是 jQuery：

$('.accordion h3').addClass('closed').next('div').hide();

        $('.accordion h3').click( function() {
            if ($(this).hasClass('closed')){
                $(this).removeClass('closed');
                $(this).addClass('open');
        $(this).next('div').stop(true,true).slideDown();
            }   else if ($(this).hasClass('open')){
                    $(this).next('div').stop(true,true).slideUp('normal', function() {
                        $(this).prev('h3').removeClass('open');
                        $(this).prev('h3').addClass('closed');
                    });
                }
        });

        $('#expand-all').click( function() {
            if ($('.accordion h3').hasClass('closed')){
                $('.accordion h3').removeClass('closed');
                $('.accordion h3').addClass('open');
        $('.accordion h3').next('div').stop(true,true).slideDown();
            }
            return false;
        });

        $('#collapse-all').click( function() {
            if ($('.accordion h3').hasClass('open')){
        $('.accordion h3').next('div').stop(true,true).slideUp('normal', function(){
                    $('.accordion h3').removeClass('open');
                    $('.accordion h3').addClass('closed');
                });
            }
            return false;
        });

以下 html 已简化，但基本结构是相同的：

<a id="expand-all" href="#">Expand all</a>
<a id="collapse-all" href="#">Collapse all</a>

<div class="accordion">
    <h3>Clickable to trigger dropdown</h3>
    <div>This is the hidden content that shows when the h3 is clicked</div>
    <h3>Clickable to trigger dropdown</h3>
    <div>This is the hidden content that shows when the h3 is clicked</div>
</div>

Answer 1

这是因为其中一个手风琴已经关闭，因此 SlideUp 已完成，并且正在调用：

$('.accordion h3').removeClass('open');
$('.accordion h3').addClass('closed');

而不是执行 $('.accordion h3')，您应该更改一个相对的，因此请尝试：

$(this).prev('h3').removeClass('open');
$(this).prev('h3').addClass('closed');

在折叠所有 SlideUp 回调中。