1

我有一个简单的手风琴式机制，我一直在研究。我熟悉 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>
4

1 回答 1

1

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

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

而不是做 $('.accordion h3')，你应该改变一个亲戚，所以尝试：

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

在折叠所有 slideUp 回调。

于 2011-01-07T18:07:27.517 回答