Question

我正在为移动设备构建一个网站，我有这个jQuery函数，根据用户选择的内容显示或隐藏主菜单：

$(function() {

    $('#nav_toggle').on('click', function(event) {  
        $('#main_nav').slideToggle();
        $(this).toggleClass("collapsed");
        event.preventDefault();  
    });

});

我的问题是：我如何在请求中保留（或不保持）我的菜单中的collapsed课程？

现在，用户必须在每个页面上切换菜单。

以某种方式将它存储在请求中可能会很好，可能是通过设置cookie？

如何做到这一点？

我对jQuery很新，所以非常感谢代码示例。

感谢您的帮助。

Answer 1

您可以尝试将查询字符串或哈希值附加到您的网址，并以这种方式传递菜单状态。或者你可以使用cookie。

以下是在JavaScript中设置/获取Cookie的代码。

function setCookie(value) {
    var expires = "; ";
    if (config.cookie_duration) {
        var date = new Date();
        date.setDate(date.getDate() + config.cookie_duration);
        expires = "; expires=" + date.toGMTString() + "; ";
    }   
    document.cookie = "SELECTED_STATE=" + value + expires + "path=/";
}

function getCookie() {
    var name = "SELECTED_STATE=";
    var c_arr = document.cookie.split(';');
    for (var i = 0; i < c_arr.length; i++) {
        var c = c_arr[i];
        while (c.charAt(0) == ' ')
            c = c.substring(1, c.length);

        if (c.indexOf(name) == 0)
            return c.substring(name.length, c.length);
    }
    return null;
}

免责声明：我很久以前在网上找到了基本想法，我不记得究竟在哪里。它被修改以适应我正在处理的一个项目的需求，所以我只是在这里复制它。

Answer 2

是的，您可以保存Cookie并在所有页面中使用

document.cookie="username=John Smith; path=/";

获取Cookie代码

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
    }
    return "";
}

在页脚上写下这样的东西

$(document).ready(function(){

    if(getCookie(cookiename)!=''){

      $('menuIdOrClass').addClass('class Name Which keep menu open')

     }

});

Soruce - http://www.w3schools.com/js/js_cookies.asp

Answer 3

我建议将值存储在cookie中（如您所述），然后在页面加载时设置它。

下载jQuery cookie插件here。现在设置值：

$.cookie("cookie_name", "cookie_value");

然后在您的document.ready()处理程序中，您可以提取值..

$.cookie("cookie_name);

..并使用类似于当前click()功能的内容进行适当设置。

Answer 4

如果您使用的是HTML5，我宁愿选择本地存储：

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Answer 5

感谢user1041953，让localStorage引起我的注意。它比我认为的cookie更容易使用。

这就是我最终的结果：

$('#nav_toggle').click(function(event) {
  $('#main_nav').toggle();
  localStorage.setItem('display', $('#main_nav').is(':visible'));
  event.preventDefault(); 
});

var block = localStorage.getItem('display');
if (block == 'false') {
  $('#main_nav').hide();
} else {
  $('#main_nav').show();
}

如何使用jQuery跨请求保存菜单切换按钮的状态？

5 个答案: