的jQuery - 切換元件和餅乾

Question

我試圖使用jQuery的Cookie的插件保存它，jQuery的切換功能：

每當有人撥動#launchpad,我想要得到它的當前狀態。

例如，如果某人切換了它，並且它變得隱藏了，那麼我想提醒它現在隱藏了 - 反之亦然。

這是我當前的代碼：

的jQuery：

$(function(){ 
      if($.cookie){ 
        //By default, if no cookie, just display. 
        $("#launchpad").toggle(!(!!$.cookie("toggle-state")) || $.cookie("toggle-state") === 'true'); 
      } 

      $('#toggle-launchpad').on('click', function(){ 


       $("#launchpad").toggle(
        if($(this).is(":visible")){ 
         alert("visible!!"); 
        }else{ 
         alert("not visible"); 
        } 

       ); 
       //Save the value to the cookie for 1 day; and cookie domain is whole site, if ignore "path", it will save this cookie for current page only; 
       $.cookie("toggle-state", $("#launchpad").is(':visible'), {expires: 1, path:'/'}); 
      }); 

     }); 

HTML：

<div id="launchpad"> 
      <div id="toggle-launchpad" title="Toggle Launchpad" style="display: ;"> 
       <i class="fa fa-plus"></i> 
      </div> 
      </div> 

我想我不能使用if function的toggle function內。有沒有人有解決我的問題？

Answer 1

如果你這樣做：

$("#launchpad").toggle(400, function() { 
    if($(this).is(":visible")){ 
     alert("visible!!"); 
    }else{ 
     alert("not visible"); 
    } 
}); 

的toggle函數完成後，該代碼就會被執行。請注意，toggle函數是異步的，所以您的$.cookie調用可能會在之前被調用div被隱藏/顯示。嘗試：

$("#launchpad").toggle(400, function() { 
    $.cookie("toggle-state", $("#launchpad").is(':visible'), {expires: 1, path:'/'}); 
}); 

不是說400是動畫將花費的（默認）時間，以毫秒爲單位。請參閱the documentation。

編輯：

if ($.cookie && $.cookie("toggle-state")) && $.cookie("toggle-state") === 'false') { 
    $("#launchpad").hide(); 
} 

這假定DIV默認爲可見（即不通過CSS隱藏）