使用切换保存到cookie显示/隐藏

这可以改进，只有一个tooglefunction？

var show = $("#shows ul li"); show.addClass("active"); $(show).each(function(c){ var cvalue = $.cookie('show' + c); if ( cvalue == 'closed' + c ) { $(this).css({display:"none"}); $(this).removeClass('active').addClass('inactive'); }; }); $("#shows li.active").toggle(function(){ var num = show.index(this); var cookieName = 'show' + num; var cookieValue = 'closed' + num; $(this).slideUp(500); $(this).removeClass('active'); $.cookie(cookieName, cookieValue, { path: '/', expires: 10 }); },function(){ var num = $(this).index(this); var cookieName = 'show' + num; $(this).slideDown(500); $(this).addClass("active"); $.cookie(cookieName, null, { path: '/', expires: 10 }); }); $("#shows li.inactive").toggle(function(){ var num = show.index(this); var cookieName = 'show' + num; $(this).slideDown(500); $(this).addClass("active"); $(this).removeClass('inactive'); $.cookie(cookieName, null, { path: '/', expires: 10 }); },function(){ var num = show.index(this); var cookieName = 'show' + num; var cookieValue = 'closed' + num; $(this).slideUp(500); $(this).removeClass('active'); $.cookie(cookieName, cookieValue, { path: '/', expires: 10 }); }); 

Answer 1

你可以这样做……

 $("#shows li").toggle(function(){ var isactive = $(this).hasClass("active") ? true : false; var num = show.index(this); var cookieName = 'show' + num; var cookieValue = null; if(isactive){ cookieValue = 'closed' + num; $(this).slideUp(500); $(this).removeClass('active'); }else{ $(this).slideDown(500); $(this).addClass("active"); $(this).removeClass('inactive'); } $.cookie(cookieName, cookieValue, { path: '/', expires: 10 }); },function(){ var isactive = $(this).hasClass("active") ? true : false; var num = $(this).index(this); var cookieName = 'show' + num; var cookieValue = null; if(isactive){ $(this).slideDown(500); $(this).addClass("active"); }else{ cookieValue = 'closed' + num; $(this).slideUp(500); $(this).removeClass('active'); } $.cookie(cookieName, cookieValue, { path: '/', expires: 10 }); }); 

Answer 2

也许这会让事情看起来很好：

 function func1() { var num = show.index(this); var cookieName = 'show' + num; var cookieValue = 'closed' + num; $(this).slideUp(500); $(this).removeClass('active'); $.cookie(cookieName, cookieValue, { path: '/', expires: 10 }); } function func2() { var num = $(this).index(this); var cookieName = 'show' + num; $(this).slideDown(500); $(this).addClass("active"); $.cookie(cookieName, null, { path: '/', expires: 10 }); } $("#shows li.active").toggle(func1,func2); $("#shows li.inactive").toggle(func2,func1); 

Answer 3

如果没有看到你的标记，你肯定可以将它们减少到一个短的.toggle 。 例如，使用toggleClass和slideToggle方法：

 $("#shows li").toggle(function(){ var num = show.index(this); $(this).slideToggle(500); $(this).toggleClass('active'); var cookieName = 'show' + num; var cookieValue = ($(this).hasClass("active") ? 'show' : 'closed') + num; $.cookie(cookieName, cookieValue, { path: '/', expires: 10 }); } 

你真的需要.active和.inactive类吗？ 我建议这些元素只需在.active类之间切换（没有，这意味着’不活跃’）。