Сдвиньте все div и измените класс h3 одной кнопкой, используя jQuery - PullRequest
Новая
       19

Сдвиньте все div и измените класс h3 одной кнопкой, используя jQuery

1 голос
/ 07 января 2011

У меня есть простой механизм типа аккордеона, над которым я работаю. Я знаком с функциями обратного вызова slideUp и slideDown и использовал его для изменения классов после завершения анимации.

У меня есть 2 кнопки - одна расширяет все дивы в аккордеоне, а другая сворачивает их. Это прекрасно работает, и при использовании только этих кнопок для управления аккордеоном классы меняются в правильное время.

Однако, когда я открываю один из аккордеонов (нажимая на 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>

1 Ответ

1 голос
/ 07 января 2011

Это потому, что один из аккордеонов уже закрыт, поэтому slideUp готов, и это вызывает: 

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

Вместо того, чтобы делать $ ('. Accordion h3'), вы должны изменить одинотносительный, поэтому попробуйте: 

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

В свернутом виде все обратный вызов slideUp.

...