jquery - 单击时显示/隐藏 div，但如果第二次单击同一链接则阻止脚本执行

Question

单击任何链接时该脚本都可以正常工作。我希望它能够阻止第二次单击同一链接时执行显示/隐藏脚本。我在这个网站和其他网站上找到了一些东西，尝试使用 .unbind 是最有希望的，但我的函数以 $(this).click(function () 开头，并且取消绑定(bind)会杀死所有内容。我无法找到重组代码的方法，因此它会在点击之前检查 toggleDiv ，然后在点击之后检查 toggleDiv 以查看它们是否相同并删除脚本。

代码笔:http://codepen.io/jpscoggan/pen/gcHbK

这是我的js代码:

//show hide
(function ($) {

    $.fn.showHide = function (options) {

        //default vars for the plugin
        var defaults = {
            speed: 200,
            easing: 'swing'
        };
        var options = $.extend(defaults, options);

        $(this).click(function () {
            $('.toggleDiv').slideUp(options.speed, options.easing);
            // once the button is clicked, the clicked div (.toggleDiv) slides up  
            var toggleDiv = $(this).attr('rel');
            // reads rel attribute of clicked link / which div id to toggle 
            $(toggleDiv).slideToggle(options.speed, options.easing);
            // toggle show/hide the correct div + speed and easing

            e.preventDefault();
        });
    };
})(jQuery);

$('.show_hide').showHide({
    speed: 200,
    // speed you want the toggle to happen             
});

Answer 1

解决此问题的一个简单方法:向您刚刚单击的类添加一个类，然后如果该链接处于事件状态，则禁止第二次单击。

Codepen

$('.show_hide section').click(function() {
    if ($(this).hasClass('active')) return false;
    //use if you want to allow a click after switching sections
    $('.active').removeClass('active');
    $(this).addClass('active');
});