Question

我有自定义clickToggle功能

确实

标签第一个切换 - 打开div 选项卡第二个切换 - 关闭div

在第一次切换之后，用户还可以通过单击div外部来关闭div，而不激活toggle2。下次我要打开div时，它将继续进行第二次切换，这是一个糟糕的错误。

所以基本上我都在问，无论如何我可以在中途结束/重启切换功能，这样如果用户点击div之外，下次我点击标签时它会再次从第一个切换开始，而不是继续第二次切换。

是否有类似重置的东西可以重启切换功能？非常绝望地想到这一天。

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

        // alternative exit(i want the toggle function to restart 
        // if this function runs, if not the next time i want to open the tab through
        // toggle 1, it will continue at toggle 2 instead which is a bad bug as that 
        //was suppose to be a exit.
        $(".container").click(function() { 
            $(".container").unbind("click").removeClass("overlay-disable");
            $(".log").html("panel hide success, isToggle = false");
            $("#toggle_content").hide();

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

    });
});

clickToggle是一个自定义插件，可以在每次单击选项卡时在两个函数之间切换，它只是打开和退出时工作顺利，但是一旦我添加了另一个退出，我无法获得重新启动切换功能的解决方案如果激活了替代退出，则切换到toggle1。

小提琴：http://jsfiddle.net/eekxzq1u/

当你点击标签时，它弹出一个灰色的框，当你再次点击标签时，它会顺利关闭。但是当你退出时，标签将不再顺利运行

Answer 1

您可以通过实施简单的状态机方法来避免使用插件。 Demo。你需要

点击states
存储当前状态currentState
用于在点击run

代码：

   var states = [function () { // click button 1st toggle
        $(".log").html("click Toggle1, show tab panel, isToggle = true");
        $("#toggle_content").animate({width:'toggle'},350);
        $(".container").addClass("overlay-disable");
        currentState = 1; //change state

        $(".container").click(function() {
            $(".container").unbind("click").removeClass("overlay-disable");
            $(".log").html("panel hide success, isToggle = false");
            $("#toggle_content").hide();
            currentState = 0; //change state
        });
    },
      function() {
        $(".container").unbind("click").removeClass("overlay-disable");
        $(".log").html("click Toggle2, hide tab panel");
        $("#toggle_content").animate({width:'toggle'},350);
          currentState = 0; //change state

    }], 
    currentState = 0,
    run = function() {
       return states[currentState].apply(this, arguments);        
    };

$("#toggle").click(run);

jquery重启切换功能

1 个答案: