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

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

更进一步，只有在单击容器时才会删除“临时”点击处理程序。如果未单击，则它将保持原位，下一个切换周期将另一个相同的点击处理程序添加到容器中。如果您坚持使用这种方法，那么您应该确保在添加新的“临时”点击处理程序之前将其解除绑定。

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

其他几点：

您的clickToggle插件过于精细化。使用标准jQuery方法可以更简单地在连续点击之间切换两个操作。标准技巧是.toggleClass()然后立即用.hasClass()测试状态并相应地进行分支。有时，您可能需要引入一个虚拟类来注册状态，但在您的情况下，您已经切换了容器的'overlay-disable'类。
jQuery保持内置切换状态以跟踪“切换”操作。此状态仍将不知道.hide()。再次使用.animate({width:'toggle'}但持续时间为零，可以实现隐藏效果并保持内置切换状态。
如果你想绑定/解除绑定事件处理程序，那么使用命名函数更有效率，但是这里永久附加一个点击处理程序更简单，更清晰容器和以前一样，使用hasClass()来测试状态和分支。
为了提供更好的用户体验，在重复的动画元素上发布stop(true)通常是个好主意。在没有停止的情况下（特别是使用更长的动画），效果队列可以建立起来并且ui可能看起来没有响应，甚至是古怪的。有时您可能需要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");
        }
    });
});

Answer 2

$（ “容器 ”）解除绑定（“ 点击”）。它的意思是你不活动/删除事件点击div容器，所以在第二次，代码$（“。容器”）。click（）将永远不会运行

如果另一个事件发生在中途，如何重置clickToggle功能

2 个答案: