jquery重新启动一个toggle函数

jquery restart a toggle function

本文关键字：一个 toggle 函数 重新启动 jquery      更新时间：2023-09-26

我有一个自定义的点击切换功能

它做

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

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

因此，基本上我是在问是否有任何方法，我可以中途结束/重新启动切换功能，这样，如果用户在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是一个自定义插件，每次我单击选项卡时，它可以在2个函数之间切换，只需打开和退出即可，但一旦我添加了一个替代退出，如果激活了替代退出，我就无法找到将切换函数重新启动回toggle1的解决方案。

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

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

您可以通过实现一种简单的状态机方法来避免使用插件。演示。您将需要

  1. 单击states时要调用的函数数组
  2. 用于存储当前状态currentState的变量
  3. 以及一个在单击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);
相关文章：