如何实施YouTube显示和隐藏难忘的侧边栏？

Question

我想创建一个侧边栏，显示/隐藏令人难忘的功能，如YouTube的侧边栏。我用下面的代码： -

<div id="showmenu">Click Here</div> 
    <div class="menu" style="display: none;"> 
    <ul> 
    <li>Button1</li> 
    <li>Button2</li> 
    <li>Button3</li> 
    </ul> 
    </div> 

&的Javascript

$(document).ready(function() { 
    $('#showmenu').click(function() { 
      $('.menu').toggle("slide"); 
    }); 
}); 

我想同样喜欢YouTube已经显示/隐藏

希望你们能帮助我。

Answer 1

使用cookies当用户隐藏边栏设置一个cookie，下次用户访问网站检查cookie是否设置，如果设置cookie隐藏侧边栏。

这个类添加到你的CSS

.toggled { 
    display: none; 
} 

<div id="showmenu">Click Here</div> 
<div class="menu" style="display: none;"> 
    <ul> 
     <li>Button1</li> 
     <li>Button2</li> 
     <li>Button3</li> 
    </ul> 

的Javascript

$(document).ready(function() { 
    if (getCookie('sidebar')) { 
     $('.menu').toggleClass("toggled"); 
    } 
    $("#showmenu").click(function() { 
     $('.menu').toggle("slide"); 
     if (getCookie('sidebar')) { 
      deleteCookie('sidebar', 'hide'); 
     }else { 
      setCookie('sidebar', 'hide'); 
     } 
    }); 

    function setCookie(cname, cvalue) { 
     var d = new Date(); 
     d.setTime(d.getTime() + (60 * 1000)); // set to expire in 60 seconds 
     var expires = "expires=" + d.toUTCString(); 
     document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; 
    } 

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

    var deleteCookie = function(cname, cvalue) { 
     document.cookie = cname + "=" + cvalue + '=;expires=Thu, 01 Jan 1970 00:00:01 GMT;path=/'; 
    }; 
});