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

Question

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

0

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

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, и он появляется и исчезает, как я хочу. Но только для первого щелчка: Как только я нажимаю более одного раза кнопку show, она выглядит как-то экспоненциально.

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

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

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

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

user2508300 12 дек. 2013, в 19:56

Источник

1

при каждом щелчке вы связываете новый щелчок, чтобы скрыть div, а затем новый, чтобы показать div, и так далее ...
A. Wolff 12 дек. 2013, в 18:51

Теги:

javascript

jquery

html

show-hide

4 ответа

2

Пытаться:

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 );

ДЕМО здесь.

Hiral 12 дек. 2013, в 16:07

1

$('.hover').on('click', function() {
    if($('tab-filteractivation2').is(':visible')) {
        $('.tab-filteractivation2').slideUp(400);
    } else {
        $('.tab-filteractivation2').slideDown(400);
    }
});

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

MaxRev17 12 дек. 2013, в 17:34

0

Не могли бы вы предоставить мне более подробную информацию о том, как это работает и каковы предпосылки вашего решения? Я пытался протестировать ваше решение, но оно у меня не сработало (возможно, я забыл что-то реализовать).
user2508300 12 дек. 2013, в 21:29
0

Извините, я использовал событие click, вам просто нужно заменить click на 'hover' в приведенном выше примере, и оно должно работать.
MaxRev17 16 дек. 2013, в 10:15

1

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

rishta 12 дек. 2013, в 16:19

Ещё вопросы

при каждом щелчке вы связываете новый щелчок, чтобы скрыть div, а затем новый, чтобы показать div, и так далее ...
Не могли бы вы предоставить мне более подробную информацию о том, как это работает и каковы предпосылки вашего решения? Я пытался протестировать ваше решение, но оно у меня не сработало (возможно, я забыл что-то реализовать).
Извините, я использовал событие click, вам просто нужно заменить click на 'hover' в приведенном выше примере, и оно должно работать.

A. Wolff · Accepted Answer · 2013-12-12T17-40-00.000Z

вы можете использовать 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');
    });
});