jQuery切換功能在第一次點擊時不起作用

Question

我想創建一個簡單的切換功能，用一個cookie來切換div show（）或hide（）以記住div在哪個狀態。到現在爲止還挺好。那麼，它的作品有點。當我切換div隱藏（）它隱藏，但是當我重新加載頁面要切換分區顯示（）我必須單擊按鈕兩次！我已經在這裏讀了一遍，但他們沒有幫助。此外，我試圖使它具有點擊功能，但根本不起作用。

這裏北京時間代碼：

jQuery().ready(function() { 

     var footeroff = jQuery.cookie('footeroff'); 
     var toggle_footer = jQuery(".toggle_footer_switch"); 

     if (footeroff == "off") { 
     jQuery("div#footer").hide(); 
     jQuery("div#wkfooter_switch").hide(); 
     toggle_footer.html("<img src='../images/other/zuklappen.png' border='0'>"); 
     }; 

     if (footeroff == "on") { 
     jQuery("div#footer").show(); 
     jQuery("div#wkfooter_switch").show(); 
     toggle_footer.html("<img src='../images/other/aufklappen.png' border='0'>"); 
     }; 

     var footer_switch = jQuery("div#footer"); 
     var toggle_footer = jQuery(".toggle_footer_switch"); 
     var toggle_switch_div = jQuery("div#toggle_switch_div"); 

     jQuery("a.toggle_footer_switch").toggle(
      function() { 
       toggle_footer.html("<img src='../images/other/zuklappen.png' border='0'>"); 
       jQuery("div#footer").fadeOut("slow"); 
       jQuery("div#wkfooter_switch").hide(); 
       jQuery.cookie("footeroff" , "off"); 
      }, 
      function() { 
       toggle_footer.html("<img src='../images/other/aufklappen.png' border='0'>"); 
       jQuery("div#footer").fadeIn("slow"); 
       jQuery("div#wkfooter_switch").show(); 
       jQuery.cookie("footeroff" , "on"); 
      } 
     ); 


    }); 

還有就是代碼點擊功能：

 jQuery().ready(function() { 

     var footeroff = jQuery.cookie('footeroff'); 
     var toggle_footer = jQuery(".toggle_footer_switch"); 

     if (footeroff == "off") { 
     jQuery("div#footer").hide(); 
     jQuery("div#wkfooter_switch").hide(); 
     toggle_footer.html("<img src='../images/other/zuklappen.png' border='0'>"); 
     }; 

     if (footeroff == "on") { 
     jQuery("div#footer").show(); 
     jQuery("div#wkfooter_switch").show(); 
     toggle_footer.html("<img src='../images/other/aufklappen.png' border='0'>"); 
     }; 

     var footer_switch = jQuery("div#footer"); 
     var toggle_footer = jQuery(".toggle_footer_switch"); 
     var toggle_switch_div = jQuery("div#toggle_switch_div"); 


     jQuery("a.toggle_footer_switch").click(function() { 

      if (footer_switch.is(":visible")) { 
       toggle_footer.html("<img src='../images/other/zuklappen.png' border='0'>"); 
       jQuery("div#footer").hide(); 
       jQuery("div#wkfooter_switch").hide(); 
       jQuery.cookie("footeroff" , "off"); 
      } 
      else if (footer_switch.is(":hidden")) { 
       toggle_footer.html("<img src='../images/other/aufklappen.png' border='0'>"); 
       jQuery("div#footer").show(); 
       jQuery("div#wkfooter_switch").show(); 
       jQuery.cookie("footeroff" , "on"); 
      } 

     }); 


    }); 

非常感謝您！

致以問候

Answer 1

下面的工作會是什麼？

jQuery().ready(function() { 

    var footeroff = jQuery.cookie('footeroff'); 
    var toggle_footer = jQuery(".toggle_footer_switch"); 

    toggle_footer.toggle(
     function() { 
      toggle_footer.html("<img src='../images/other/zuklappen.png' border='0'>"); 
      jQuery("div#footer").fadeOut("slow"); 
      jQuery("div#wkfooter_switch").hide(); 
      jQuery.cookie("footeroff" , "off"); 
     }, 
     function() { 
      toggle_footer.html("<img src='../images/other/aufklappen.png' border='0'>"); 
      jQuery("div#footer").fadeIn("slow"); 
      jQuery("div#wkfooter_switch").show(); 
      jQuery.cookie("footeroff" , "on"); 
     } 
    ); 
    // since the page starts off with the div shown, so let's hide it. 
    // note that this will do the slow fade - you may want to check for this inside the toggle function and just do an instant hide() instead 
    if (footeroff == "off") { 
     toggle_footer.toggle(); 
    }; 
}); 

Answer 2

我知道這是一個非常古老的問題，而只是對於那些尋求速戰速決的人，這個工作對我來說：

一個。在PHP/HTML文件中：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/.../jquery.min.js"></script> 
    <script> 
    $(document).ready(function(){ 
     $("#pClick").click(function(){   
      $("#pText").toggle(); 
      $("#pText").text("..."); 
     }); 
    }); 
    </script> 

b。在CSS文件中：

#pText {display: none;} 

它現在即使在第一次點擊時也能正常工作。這是一個簡單而快速的答案，我希望對某些人有用。