jQuery的重啓切換功能

Question

我有一個自定義clickToggle功能

它

標籤1切換 - 開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是一個自定義插件，以每次2個功能之間切換，我單擊該選項卡，它的工作對順利剛剛開放和退出，但一旦我添加了一個替代出口我不能得到解決重啓如果激活備選出口，則切換功能返回到切換1。

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

當u點擊選項卡，它彈出一個灰色的框，當u點擊選項卡再次，它順利關閉。 但是當你標籤出來時，標籤將不再平穩工作

Answer 1

你可以通過實現一個簡單的狀態機方法來避免使用插件。 Demo。你需要的功能

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);