JQuery：div出现和消失正常但第二次点击它不起作用答案

【问题标题】：JQuery: div appears and disappears normally but second time clicked it does not workJQuery：div出现和消失正常但第二次点击它不起作用
【发布时间】：2013-12-12 18:47:59
【问题描述】：

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

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

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

提前非常感谢。我希望这对你们来说是清楚的。

【问题讨论】：

在每次点击时，您都会重新绑定一次新的点击以隐藏 div，然后重新绑定一次以显示 div，依此类推...

标签： javascript jquery html show-hide

【解决方案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.

【讨论】：

【解决方案2】：

你可以使用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');
    });
});

【讨论】：

【解决方案3】：

每次隐藏或显示选项卡时都会添加一个事件侦听器。需要单独初始化节点的监听器。

【讨论】：

【解决方案4】：

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

上面的代码将以更简单的方式完成您想要做的事情。如果你很难理解它是如何工作的，请大声告诉我:)。

【讨论】：

您能否提供更多详细信息，以及您的解决方案的背景是什么？我试图测试您的解决方案，但它对我不起作用（也许我忘记了实现某些东西）。
对不起，我使用了点击事件，您只需在上面的示例中将点击替换为“悬停”，它应该可以工作。