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

它现在即使在第一次点击时也能正常工作。这是一个简单而快速的答案，我希望对某些人有用。