jQuery與Cookie切換

Question

我有以下切換系統，但我希望它記住使用jQuery cookie插件打開/關閉的內容。例如，如果我打開一個切換，然後離開頁面，當我回來時它應該仍然是開放的。默認情況下，所有的切換都應該關閉。

這是迄今爲止的代碼，但它變得相當混亂，有些幫助將非常感謝。

jQuery.cookie = function (name, value, options) { if (typeof value != 'undefined') { options = options || {}; if (value === null) { value = ''; options = $.extend({}, options); options.expires = -1; } var expires = ''; if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) { var date; if (typeof options.expires == 'number') { date = new Date(); date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000)); } else { date = options.expires; } expires = '; expires=' + date.toUTCString(); } var path = options.path ? '; path=' + (options.path) : ''; var domain = options.domain ? '; domain=' + (options.domain) : ''; var secure = options.secure ? '; secure' : ''; document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join(''); } else { var cookieValue = null; if (document.cookie && document.cookie != '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = jQuery.trim(cookies[i]); if (cookie.substring(0, name.length + 1) == (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } }; 
     // var showTop = $.cookie('showTop'); 
     if ($.cookie('showTop') == 'collapsed') { 

      $(".toggle_container").hide(); 
      $(".trigger").toggle(function() { 
       $(this).addClass("active"); 
      }, function() { 
       $(this).removeClass("active"); 
      }); 
      $(".trigger").click(function() { 
       $(this).next(".toggle_container").slideToggle("slow,"); 
      }); 
     } else { 

      $(".toggle_container").show(); 
      $(".trigger").toggle(function() { 
       $(this).addClass("active"); 
      }, function() { 
       $(this).removeClass("active"); 
      }); 
      $(".trigger").click(function() { 
       $(this).next(".toggle_container").slideToggle("slow,"); 
      }); 
     }; 

     $(".trigger").click(function() { 
      if ($(".toggle_container").is(":hidden")) { 
       $(this).next(".toggle_container").slideToggle("slow,"); 
       $.cookie('showTop', 'expanded'); 
      } else { 
       $(this).next(".toggle_container").slideToggle("slow,"); 
       $.cookie('showTop', 'collapsed'); 
      } 

      return false; 

     }); 

，這是一段HTML它的工作原理：

<li> 
             <label for="small"><input type="checkbox" id="small" /> Small</label> 
             <a class="trigger" href="#">Toggle</a> 
             <div class="toggle_container"> 
              <p class="funding"><strong>Funding</strong></p> 
              <ul class="childs"> 
               <li class="child"> 
                <label for="fully-funded1"><input type="checkbox" id="fully-funded1" /> Fully Funded</label> 
                <a class="trigger" href="#">Toggle</a> 
                <div class="toggle_container"> 
                 <p class="days"><strong>Days</strong></p> 
                 <ul class="days clearfix"> 
                  <li><label for="1pre16">Pre 16</label> <input type="text" id="1pre16" /></li> 
                  <li><label for="2post16">Post 16</label> <input type="text" id="2post16" /></li> 
                  <li><label for="3teacher">Teacher</label> <input type="text" id="3teacher" /></li> 
                 </ul> 
                </div> 
               </li> 

Answer 1

可以縮短所有的代碼到這一點，應該保持它的簡單得多：

$(".toggle_container").toggle($.cookie('showTop') != 'collapsed'); 

$(".trigger").click(function() { 
    $(this).toggleClass("active").next(".toggle_container").slideToggle("slow,"); 
    $.cookie('showTop', 
       $(".toggle_container").is(":hidden") ? 'expanded' : 'collapsed'); 
    return false; 
}); 

這裏的一種爲每個容器設置cookie的方法，所有必要的是給每個.toggle_container一個唯一的ID：

$(".toggle_container").each(function() { 
    $(this).toggle($.cookie('show-' + this.id) != 'collapsed'); 
}); 

$(".trigger").click(function() { 
    var tc = $(this).toggleClass("active").next(".toggle_container").slideToggle("slow", function() { 
     $.cookie('show-' + $(this).attr("id"), $(this).is(":hidden") ? 'collapsed' : 'expanded');   
    }); 
    return false; 
});​ 

Answer 2

好吧，這是我的代碼：

註釋掉的東西，工作得很好，但沒有跟唯一的ID。上面的代碼不起作用。

$(document).ready(function() { 

     $(".toggle_container").each(function() { 
      $(this).toggle($.cookie('show-' + this.id) != 'collapsed'); 
     }); 

     $(".trigger").click(function() { 
      var tc = $(this).toggleClass("active").next(".toggle_container").slideToggle("slow", function() { 
       $.cookie('show-' + $(this).attr("id"), $(this).is(":hidden") ? 'collapsed' : 'expanded');   
      }); 
      return false; 
     });​ 

     //$(".toggle_container").toggle($.cookie('showTop') != 'collapsed'); 

     /*$(".trigger").click(function() { 
      $(this).toggleClass("active").next(".toggle_container").slideToggle("slow,"); 
      $.cookie('showTop', 
      $(".toggle_container").is(":hidden") ? 'expanded' : 'collapsed'); 
      return false; 
     });*/ 

    }); 

，這是HTML

      <li> 
        <input id="MC_ctl00_RPS_chkItem_1" type="checkbox" name="ctl00$MC$ctl00$RPS$ctl01$chkItem" /> 
        <label for="MC_ctl00_RPS_chkItem_1" id="MC_ctl00_RPS_lbl_1">Medium</label> 
        <a class="trigger" href="#">Toggle</a> 
        <div class="toggle_container" id="divFund"> 
         <p class="funding"><strong>Funding</strong></p> 
         <ul class="childs"> 

           <li class="child"> 
            <input id="MC_ctl00_RPS_RPF_1_chkItem_0" type="checkbox" name="ctl00$MC$ctl00$RPS$ctl01$RPF$ctl00$chkItem" /> 
            <label for="MC_ctl00_RPS_RPF_1_chkItem_0" id="MC_ctl00_RPS_RPF_1_lbl_0">Fully Funded</label> 
            <a class="trigger" href="#">Toggle</a> 
            <div class="toggle_container" id="divDays"> 
             <p class="days"><strong>Days</strong></p> 
             <ul class="days clearfix"> 
              <li> 
               <label for="MC_ctl00_RPS_RPF_1_txtPre16_0" id="MC_ctl00_RPS_RPF_1_lblPre16_0">Pre 16</label> 
               <input name="ctl00$MC$ctl00$RPS$ctl01$RPF$ctl00$txtPre16" type="text" id="MC_ctl00_RPS_RPF_1_txtPre16_0" /> 
              </li> 
              <li> 
               <label for="MC_ctl00_RPS_RPF_1_txtPost16_0" id="MC_ctl00_RPS_RPF_1_Label1_0">Post 16</label> 
               <input name="ctl00$MC$ctl00$RPS$ctl01$RPF$ctl00$txtPost16" type="text" id="MC_ctl00_RPS_RPF_1_txtPost16_0" /> 
              </li> 
              <li> 
               <label for="MC_ctl00_RPS_RPF_1_txtTeacher_0" id="MC_ctl00_RPS_RPF_1_Label2_0">Teacher</label> 
               <input name="ctl00$MC$ctl00$RPS$ctl01$RPF$ctl00$txtTeacher" type="text" id="MC_ctl00_RPS_RPF_1_txtTeacher_0" /> 
              </li> 

             </ul> 
            </div> 
           </li>