javascript - JQuery:div正常出现和消失，但第二次单击它不起作用

Question

我对 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)。

因此我写它是指数级的。它将从点击越来越多的 Action 直到完成。但我很高兴只延迟一次，而所有其他步骤都没有延迟。

有人可以帮助我通过这个功能并告诉我如何防止它吗？那太好了!

提前非常感谢。我希望你们能明白这一点。

Answer 1

尝试:

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

<强> DEMO here.