javascript - 如果中途发生另一个事件，如何重置 clickToggle 函数

Question

所以基本上，我正在尝试进行点击切换以扩展覆盖的 div，此代码效果很好。

    // plugin for clickToggle
    (function($) {
        $.fn.clickToggle = function(func1, func2) {
            var funcs = [func1, func2];
            this.data('toggleclicked', 0);
            this.click(function() {
                var data = $(this).data();
                var tc = data.toggleclicked;
                $.proxy(funcs[tc], this)();
                data.toggleclicked = (tc + 1) % 2;
            });
            return this;
        };
    }($));

    $(function() {
       $("#toggle").clickToggle(function() {
            $(".log").html("click Toggle1, show tab panel");
            $("#toggle_content").animate({width:'toggle'},350);
            $(".container").addClass("overlay-disable");

        },function() {
            $(".log").html("click Toggle2, hide tab panel");
            $("#toggle_content").animate({width:'toggle'},350);
            $(".container").removeClass("overlay-disable");
        });
   });

由于我的覆盖 div 没有覆盖整个页面，它覆盖了大约 60% 的宽度，所以我决定在两者之间添加一个事件来检查用户是否在覆盖的 div 之外单击，如果他们点击了，它将触发关闭它的结果

最新代码:

    $(function() {
       $("#toggle").clickToggle(function() {
            $(".log").html("click Toggle1, show tab panel");
            $("#toggle_content").animate({width:'toggle'},350);
            $(".container").addClass("overlay-disable");

            $(".container").click(function() {
                $(".container").unbind("click");
                $(".log").html("panel hide success");
                $("#toggle_content").hide();
                $(".container").removeClass("overlay-disable");
            }); 


        },function() {
            $(".log").html("click Toggle2, hide tab panel");
            $("#toggle_content").animate({width:'toggle'},350);
            $(".container").removeClass("overlay-disable");
        });
   });

现在的问题是，如果我在覆盖层 div(.container) 之外单击，它会很好地关闭，但是当我单击我的选项卡再次打开它时，它将运行退出 function(toggle2) 而不是重新启动回到第一个 function(toggle1)。

我尝试执行 ("#toggle").unbind("clickToggle"); 但无济于事，我们将不胜感激。

Answer 1

问题中的代码不会“在其间再添加一个事件”。更好的总结是它“临时添加了一个点击处理程序”。关键是处理程序不是事件，而是响应事件的东西。

更进一步，“临时”点击处理程序只有在容器被点击时才会被移除。如果它没有被点击，那么它将保留在原地并且下一个切换周期将向容器添加另一个相同的点击处理程序。如果您要坚持使用这种方法，那么您应该确保在添加新点击处理程序之前未绑定(bind)“临时”点击处理程序。

也就是说，在这种情况下，点击处理程序的累积并不是特别有害，但不受欢迎。如果/最终单击容器时，所有内容都将解除绑定(bind)。在许多应用程序中，点击处理程序的累积是非常不受欢迎的。

其他几点:

1. 您的 clickToggle 插件过于复杂。有更简单的方法，使用标准的 jQuery 方法，通过连续点击在两个 Action 之间切换。一个标准的技巧是 .toggleClass() 然后立即使用 .hasClass() 测试状态并相应地分支。有时，您可能需要引入一个虚拟类来注册状态，但在您的情况下，您已经切换了容器的“覆盖禁用”类。

2. jQuery 维护一个内置的切换状态，用于跟踪“切换”操作。此状态将保持不知道 .hide()。通过再次使用 .animate({width:'toggle'}，但持续时间为零，您可以实现隐藏效果并保持内置切换状态。

3. 如果您想绑定(bind)/取消绑定(bind)一个事件处理程序，那么使用命名函数会更有效，但这里永久将点击处理程序附加到容器，并像以前一样使用 hasClass() 来测试状态和相应的分支。

4. 为了提供更好的用户体验，对重复动画元素发出 stop(true) 通常是个好主意。如果不停止，(特别是对于较长的动画)效果队列可能会增加，用户界面可能会显得无响应，甚至古怪。有时您可能需要 stop(true,true)，有时需要 stop(true,false)(请参阅 .stop())。

我会做这样的事情:

$(function() {
    $("#toggle").on('click', function() {
        $("#toggle_content").stop(true,false).animate({width:'toggle'}, 350);
        $(".container").toggleClass('overlay-disable');
        if($(".container").hasClass('overlay-disable')) {
            $(".log").html("click Toggle1, show tab panel");
        } else {
            $(".log").html("click Toggle2, hide tab panel");
        }
    });

    $(".container").on('click', function() {
        if($(this).hasClass('overlay-disable')) {
            $("#toggle_content").stop(true,false).animate({width:'toggle'}, 0);//zero duration will give 'hide' effect
            $(this).removeClass("overlay-disable");
            $(".log").html("panel hide: success");
        } else {
            $(".log").html("panel hide: not this time");
        }
    });
});