即使刷新后，Jquery UI Accordion菜单也可以保存菜单状态
我有jquery UI Accordion菜单。 单击时显示特定的div元素。 我想知道我是否刷新页面，例如div3处于活动状态（可见），如何在重新加载页面后再次激活div3？ 我试图用cookies解决这个问题，但没有运气。 有没有人知道的演示？
谢谢。
这是首先保存选定的手风琴状态然后在页面重新加载时甚至在下次访问时激活该状态的代码，只要cookie保持不变。
jQuery(document).ready(function(){ var act = 0; $( "#accordion" ).accordion({ create: function(event, ui) { //get index in cookie on accordion create event if($.cookie('saved_index') != null){ act = parseInt($.cookie('saved_index')); } }, change: function(event, ui) { //set cookie for current index on change event $.cookie('saved_index', null); $.cookie('saved_index', ui.options.active); }, active:parseInt($.cookie('saved_index')) }); }); 我使用过jquery cookie插件，你可以从这里下载https://github.com/carhartl/jquery-cookie/
使用新的1.10.1 UI
$(function () { var icons = { header: "ui-icon-triangle-1-e", activeHeader: "ui-icon-triangle-1-s", headerSelected: "ui-icon-triangle-1-s" }; var act = 0; $( "#accordion" ).accordion({ icons: icons, collapsible: true, clearStyle: true, heightStyle: "content", autoHeight: false, create: function(event, ui) { //get index in cookie on accordion create event if($.cookie('saved_index') != null){ act = parseInt($.cookie('saved_index')); } }, activate: function(event, ui) { //set cookie for current index on change event var active = jQuery("#accordion").accordion('option', 'active'); $.cookie('saved_index', null); $.cookie('saved_index', active); }, active:parseInt($.cookie('saved_index')) }); $( "#toggle" ).button().toggle(function() { $( "#accordion" ).accordion( "option", "icons", false ); }, function() { $( "#accordion" ).accordion( "option", "icons", icons ); }); });
我不想使用cookie或会话变量。 我选择了HTML5的本地存储。
这是我的解决方案：
$("#accordion").accordion({ //set localStorage for current index on activate event activate: function(event, ui) { localStorage.setItem("accIndex", $(this).accordion("option", "active")); }, active: parseInt(localStorage.getItem("accIndex")) });
只是对上述解决方案的一个小改进，以管理所有条目关闭的手风琴（活动：假）：
$(function () { var myact = false; $( "#myaccordion" ).accordion({ clearStyle: true, collapsible: true, // allow to close completely create: function (event, ui) { //get index in cookie on accordion create event if (($.cookie('saved_index') != null) && ($.cookie('saved_index') != 'false')) { myact = parseInt($.cookie('saved_index')); } }, change: function (event, ui) { //set cookie for current index on change event myact = ui.options.active; $.cookie('saved_index', null, { expires: 2, path: '/' }); // session cookie $.cookie('saved_index', myact, { expires: 2, path: '/' }); }, active: ($.cookie('saved_index') == null) ? 0 : ($.cookie('saved_index') == 'false') ? false : parseInt($.cookie('saved_index')) }); });
所选择的解决方案对我不起作用（jQuery 1.8.2，jQuery-UI 1.9.1）。
我修改了它，如下面的代码片段所示：
jQuery(document).ready(function(){ $( "#accordion" ).accordion({ change: function(event, ui) { //set cookie for current index on change event $.cookie('saved_index', null); $.cookie('saved_index', $( "#accordion" ) .accordion( "option", "active" )); }, active:parseInt($.cookie('saved_index')) }); });
@DeM解决方案对我有用，但我一直在收到这个错误。
在初始化之前不能调用手风琴上的方法; 试图调用方法’选项’
以下修改对我有用：
$("#accordion").accordion({ //set localStorage for current index on activate event activate: function(event, ui) { //Find the index of the header. This can be the class|element you specify in the "header" init argument. var index = $(this).find("h3").index(ui.newHeader[0]); localStorage.setItem("accIndex", index); }, // "|| 0" is used to activate first by default active: parseInt(localStorage.getItem("accIndex")) || 0 });