Hide/show a block permanently

问题

I am using slidetoggle to open and close div, with easing using jquery.

<script>
 function toggleText() {
 $('#divToToggle').slideToggle("slow");
 if ($('#divToToggle').css('display') == 'none') {
      $('#aTag').html('Show');
 }
 else {
      $('#aTag').html('Hide');
 }
 }
</script>
<a id="aTag" href="javascript:toggleText();">
  Hide
</a>

The div it controls is <div id="divToToggle"></div>

Issue I have is onclick the text isnt changing , from Show to Hide and vice versa... I must be missing something very very simple..

Bugger also meant to ask, how do i attah a cookie to the event

回答1:

Try this . This will work

<script>
     function toggleText() {
          $('#divToToggle').slideToggle("slow", function(){
             if ($('#divToToggle').css('display') == 'none') {
                 $('#aTag').html('Show');
             }
             else 
             {
                 $('#aTag').html('Hide');
             }    
       });    
     }
</script>
<a id="aTag" href="javascript:toggleText();">
      Hide
</a>

EDIT : Here is a simple function on how to set and delete a cookie - src -

  function setCookie(name,value,days) {
        if (days) {
            var date = new Date();
            date.setTime(date.getTime()+(days*24*60*60*1000));
            var expires = "; expires="+date.toGMTString();
        }
        else var expires = "";
        document.cookie = name+"="+value+expires+"; path=/";
    }

    function getCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1,c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
    }

    function deleteCookie(name) {
        setCookie(name,"",-1);
    }

   function toggleText() {
              $('#divToToggle').slideToggle("slow", function(){
                 if ($('#divToToggle').css('display') == 'none') {
                     $('#aTag').html('Show');
                      deleteCookie('hiddendiv') 

                 }
                 else 
                 {
                     $('#aTag').html('Hide');
                     setCookie('hiddendiv',1,MENTOINYOURTIMEHERE)  
                 }    
           });    
         }

  $('aTag').click('toggleText');
  if(getCookie('hiddendiv'))
  {
    $('#divToToggle').hide();
  }

<a id="aTag" href="javascript:toggleText();">
      Hide
</a>
<div id ="divToToggle"></div>

回答2:

Live on JSFiffle http://jsfiddle.net/T7vFf/

<script>
function toggleText() {
    $('#divToToggle').slideToggle("300", function() {
        if ($(this).is(":visible")) {
            $('#aTag').html('Hide');
        } else {
            $('#aTag').html('Show');
        }
    });
}
</script>

<a id="aTag" href="javascript:toggleText();">
  Hide
</a>
<div id="divToToggle">Div To Toggle</div>

来源：https://stackoverflow.com/questions/8462326/hide-show-a-block-permanently

标签

jquery

toggle