2010-12-20 85 views
1

我试图保存一个可折叠菜单的状态,并使用jQuery Cookie插件..到目前为止我遇到了麻烦..虽然..任何帮助吗?用cookie和jquery保存UI状态

,它的折叠/展开

<script type="text/javascript"> 
    $(document).ready(function() { 

    $(".login-holder > ul > .loginTitle").click(function() { 
     $(this).parent().find("li").slideToggle("fast"); 
     if ($(this).parent().find(".toggle").html() == "+") { 
      $(this).parent().find(".toggle").html("-"); 
     } else { 
      $(this).parent().find(".toggle").html("+"); 
     } 
    }); 
    }) 
</script> 

XHTML的,我已经做到了这一点使用cookie

<ul class="account-links"> 
     <div class="loginTitle">User Options<span class="toggle">-</span></div> 
     <div class="menuLinks"> 
     <li> 
      <%= Html.ActionLink<EventController>(x => x.List(), "Events Near Me")%> 
     </li> 
     <li> 
      <%= Html.ActionLink<MyEventsController>(x => x.List(), "My Events")%> 
     </li> 
     <li> 
      <%= Html.ActionLink<AccountController>(x => x.Edit(), "My Profile")%> 
     </li> 
     <li> 
      <%= Html.ActionLink<ClubController>(x => x.List(), "Clubs Near Me")%> 
     </li> 
     <li> 
      <%= Html.ActionLink<MyClubsController>(x => x.List(), "My Clubs")%> 
     </li> 
     <li> 
      <%= Html.ActionLink<AccountController>(x => x.ChangePassword(), "Change My Password")%> 
     </li> 
     <li> 
      <%= Html.ActionLink<DependantController>(x => x.List(), "My Dependants") %> 
     </li> 
     </div> 
     </ul> 
    </div> 
    <% if (ViewModel.Profile.HasOrganizerInfo) { %> 
    <div class="login-holder"> 
    <ul class="account-links"> 
     <div class="loginTitle">Organizer Details<span class="toggle">-</span></div> 
     <div class=menuLinks> 
     <li> 
      <%= Html.ActionLink<AccountController>(x => x.Organizer(), "Organizer Details")%> 
     </li> 
     <li> 
      <%= Html.ActionLink<EventController>(x => x.Edit(default(int?)), "Post An Event")%> 
     </li> 
     <li> 
      <%= Html.ActionLink<EventAdminController>(x => x.List(), "Events Created By Me") %> 
     </li> 
     <li> 
      <%= Html.ActionLink<ClubController>(x => x.Edit(default(int?)), "Create A Club")%> 
     </li> 
     <li> 
      <%= Html.ActionLink<ClubAdminController>(x => x.List(), "Clubs Created By Me")%> 
     </li> 
     </div> 
    </ul> 
    </div> 
    <% } %> 
+0

我根本没有在代码中看到任何对cookie的引用,我是否错过了一些东西?对于性能,可读性和可维护性,您应该在本地存储此引用:$(this).parent()。find(“。toggle”)(例如var foo = ; foo.html())。 – MightyE 2010-12-20 13:55:38

+0

嗯,我有困难,所以我认为我应该把一个干净的副本在那里没有参考,所以它没有浑浊的情况 – Kevin 2010-12-20 13:57:46

回答

0

一种方式的剧本是附加一个unload处理程序设置cookie - 它通过找到当前不是默认的所有类的ID(不管它是可见还是隐藏取决于你),然后将它们保存到cookie中来实现它。当页面再次加载时,它会检查该cookie是否存在,如果存在,它会使用ID字符串作为选择器将toggled from the default类应用于之前保存的项目。