一个利用cookie实现的刷新页面对下拉菜单无影响的脚本

传说：凡事都有第一次……

 

使用ul和li制作的3级菜单，需要实现当页面刷新后，停留在之前菜单，而不跟随刷新到默认状态。

利用cookie保存了当前菜单打开的状态，在刷新页面后，读取cookie的值，并更改对应菜单的样式。（-_-|||忙了，先把脚本放上，后续html和css）

  1 <script type="text/javascript">
  2     //封装jQuery.cookie
  3     jQuery.cookie = function (name, value, options) {
  4         if (typeof value != 'undefined') { // name and value given, set cookie
  5             options = options || {};
  6             if (value === null) {
  7                 value = '';
  8                 options = $.extend({}, options); // clone object since it's unexpected behavior if the expired property were changed
  9                 options.expires = -1;
 10             }
 11             var expires = '';
 12             if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
 13                 var date;
 14                 if (typeof options.expires == 'number') {
 15                     date = new Date();
 16                     date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
 17                 } else {
 18                     date = options.expires;
 19                 }
 20                 expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
 21             }
 22             var path = options.path ? '; path=' + (options.path) : '';
 23             var domain = options.domain ? '; domain=' + (options.domain) : '';
 24             var secure = options.secure ? '; secure' : '';
 25             document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
 26         } else { // only name given, get cookie
 27             var cookieValue = null;
 28             if (document.cookie && document.cookie != '') {
 29                 var cookies = document.cookie.split(';');
 30                 for (var i = 0; i < cookies.length; i++) {
 31                     var cookie = jQuery.trim(cookies[i]);
 32                     // Does this cookie string begin with the name we want?
 33                     if (cookie.substring(0, name.length + 1) == (name + '=')) {
 34                         cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
 35                         break;
 36                     }
 37                 }
 38             }
 39             return cookieValue;
 40         }
 41     };
 42 </script>
 43 <script>
 44     //左侧菜单拉伸效果脚本
 45     $(document).ready(function () {
 46         var cooid = "none";
 47         $(".level1 > a").click(function () {
 48             cooid = $(this).attr("id");
 49             $.cookie("level1", cooid);
 50             var nowid ="#" + $(this).attr("id");
 51             DoMenu(nowid,1);
 52         });
 53         
 54         $(".level2 > a").click(function () {
 55             cooid = $(this).attr("id");
 56             $.cookie("level2", cooid);
 57             var nowid ="#" + $(this).attr("id");
 58             DoMenu(nowid,2);
 59         });
 60         if ($.cookie("level1") != "none") {
 61             cooid ="#" + $.cookie("level1");
 62             ShowMenu(cooid);
 63         }
 64         if ($.cookie("level2") != "none") {
 65             cooid = "#" + $.cookie("level2");
 66             ShowMenu(cooid);
 67         }
 68         function DoMenu(coovalue, level){    
 69             if($(coovalue).next().css("display") == "block"){
 70                 $(coovalue).removeClass("current")
 71                 .next().slideUp(300);
 72                 if (level == 1) {
 73                     $.cookie("level1", "none");
 74                     $.cookie("level2", "none");
 75                 }
 76                 else {
 77                     $.cookie("level2", "none");
 78                 }
 79             }
 80             else{
 81                 $(coovalue).addClass("current")
 82                 .next().slideDown(300)
 83                 .parent().siblings().children("a").removeClass("current")
 84                 .next().slideUp(300);
 85             }
 86         }
 87         function ShowMenu(coovalue) {
 88             if ($(coovalue).next().css("display") == "block") {
 89                 $(coovalue).removeClass("current")
 90                 .next().hide();
 91             }
 92             else {
 93                 $(coovalue).addClass("current")
 94                 .next().show()
 95                 .parent().siblings().children("a").removeClass("current")
 96                 .next().hide();
 97             }
 98         }
 99     })
100 </script>

 

转载于:https://www.cnblogs.com/Anyedgm/p/3667843.html