JQuery: div появляется и исчезает нормально, но при повторном нажатии это не работает

Я довольно новичок в JQuery. Я искал div, чтобы скрыться и показать на моей домашней странице. Это сработало со следующим кодом довольно хорошо:

jQuery(document).ready(function () {
jQuery(".tab-filteractivation2").hide(); //hide at the beginning

function hideDiv(e) {
    e.preventDefault();
    jQuery(this).text('open it')  // text after first click
    .click(showDiv)
    .siblings(".tab-filteractivation2").hide(400);
}
function showDiv(e) {
    e.preventDefault();
    jQuery(this).text('close it')  // text when it is open
    .click(hideDiv)
    .siblings(".tab-filteractivation2").show(400);
}
jQuery('.hover').click( showDiv );

Это мой HTML-код:

<div class="filter">
    <a class="hover" href="javascript:;">open</a>
    <div class="tab-filteractivation2">test</div>
</div>

Мой DIV называется tab-filteractivation2, и он появляется и исчезает, как я хочу. Но только для первого клика: как только я нажимаю более чем один раз кнопку показа, она выглядит как экспоненциальная.

Вот небольшое пошаговое введение: 1. Я нажимаю "открыть" и появляется вкладка с задержкой (400) (с текстом "тест") 2. Я нажимаю "закрыть" и вкладка исчезает с задержкой (400) (пока здесь все в порядке) 3. Я снова нажимаю "открыть", и появляется вкладка, НО сначала она появляется с задержкой (400), а затем сразу исчезает с задержкой (400), а затем снова появляется с задержкой (400). 4. Я нажимаю "закрыть", и кран исчезает с задержкой (400), появляется с задержкой, исчезает с задержкой, появляется с задержкой и исчезает с задержкой (400).

Поэтому я написал это как-то экспоненциально. Это будет от клика по клику все больше и больше действий, пока не будет завершено. Но я был бы рад, если бы эта задержка была только однажды, а все остальные шаги - нет.

Может ли кто-нибудь помочь мне с этой функцией и сказать, как я мог бы предотвратить это? Это было бы прекрасно!

Спасибо заранее. И я надеюсь, что это было как-то понятно для вас, ребята.

Источник

4 ответа

Решение

Вы могли бы использовать toggle():

jQuery('.hover').click(function (e) {
    e.preventDefault();
    var $this = $(this);
    $this.siblings(".tab-filteractivation2").stop().toggle(400, function () {
       $this.text($(this).is(':visible') ? 'close it' : 'open it');
    });
});
Источник

Пытаться:

jQuery(".tab-filteractivation2").hide(); //hide at the beginning

function showDiv(e) {
    e.preventDefault();
    if(jQuery(this).text() == 'close it'){
        jQuery(this).text('open it').siblings(".tab-filteractivation2").hide(400);
    }
    else{        
        jQuery(this).text('close it').siblings(".tab-filteractivation2").show(400);
    }

}
jQuery('.hover').click( showDiv );

ДЕМО здесь.

Источник

Вы добавляете прослушиватель событий каждый раз, когда скрываете или показываете вкладку. Вы должны инициализировать слушателей узлов отдельно.

Источник 
$('.hover').on('click', function() {
    if($('tab-filteractivation2').is(':visible')) {
        $('.tab-filteractivation2').slideUp(400);
    } else {
        $('.tab-filteractivation2').slideDown(400);
    }
});

Приведенный выше код сделает то, что вы пытаетесь сделать, гораздо более простым способом. Если вы изо всех сил пытаетесь понять, как это работает, дайте мне крик:).

Источник
Другие вопросы по тегам