使用JQuery保持菜单的切换状态

Question

使用JQuery保持菜单的切换状态

11

我有一个用于菜单的HTML切换按钮：

<a href="#" id="toggle_nav" class="sidebar-toggle" data-toggle="offcanvas" role="button">

我该如何保存开关状态以便在页面加载时重新加载它？

我已经开始了：

$(document).ready(function() {
    $("#toggle_nav").toggle(function() {

    });
});

但我不确定要使用什么来保持状态。

- charlie

您可以使用localStorage。 - alesc

你有例子吗？ - charlie

我认为你可以使用会话（session），在页面重新加载后检查你的会话，如果你的会话等于1，则显示$("#toggle_nav")，否则隐藏。 - Morteza Negahi

可能是 https://dev59.com/0F0a5IYBdhLWcg3wva56 的重复问题。 - guest271314

6个回答

1

使用隐藏域。当面板打开或关闭时，使用JS设置此隐藏域的值，并在页面加载时检查隐藏域。示例- 在您的JS中，我使用一个函数来设置哪些面板是打开/关闭的，第二个函数用于排列它们。此示例基于页面上有多个面板，但如果需要，您可以快速更改它以处理仅一个面板。

function init() {
    if ($("#hdnOpenPanels").val()) {
        $(".fixPanels").click();
    }
}
// Ensures that the correct panels are open on postback
$(".checkPanels").click(function () {
    var checkPanel1= $("#Panel1").hasClass("in");
    var checkPanel2 = $("#Panel2").hasClass("in");
    var checkPanel3 = $("#Panel3").hasClass("in");

    $("#hdnOpenPanels").val(checkPanel1 + "|" + checkPanel2 + "|" + checkPanel3);
});

$(".fixPanels").click(function () {
    if ($("#hdnOpenPanels").val().split('|')[0] === "true") {
        $("#Panel1").collapse('show');
    } else {
        $("#Panel1").collapse('hide');
    }

    if ($("#hdnOpenPanels").val().split('|')[1] === "true") {
        $("#Panel2").collapse('show');
    } else {
        $("#Panel2").collapse('hide');
    }

    if ($("#hdnOpenPanels").val().split('|')[2] === "true") {
        $("#Panel3").collapse('show');
    } else {
        $("#Panel3").collapse('hide');
    }
});

现在你有两个简单的类可用于添加到任何需要页面知道哪些面板是打开的项目（.checkPanels）以及“修复”应该打开哪些面板的项目（.fixPanels）。如果页面上有模态框，在关闭时它们需要“fixPanels”（即使可能没有回传）。

在你的代码后台：

将此添加到你的PageLoad：

    protected void Page_Load(object sender, EventArgs e)
    {
        if (Session["sPanels"] != null)
        {
            hdnOpenPanels.Value = Session["sPanels"].ToString();
            Session.Remove("sPanels");
        }

        if (IsPostBack){...}
        else {...}
    }

最后，在任何会导致面板受到影响的后端代码函数中，都要在该函数的末尾添加此行：

Session["sPanels"] = hdnOpenPanels.Value;

- Haensz

0

正如其他人所解释的，我们可以使用localStorage（HTML5）或者使用cookies。

请参考这篇文章，了解如何使用cookies来持久化数据。

由于此实现需要在cookie中存储较少的数据，因此使用cookie是您的最佳选择。

- Varun

0

有许多方法可以实现这一点，包括本地存储、Cookie、URL 参数、锚点片段和服务器端存储。

如果您需要为用户持久化值，无论使用哪个浏览器，都需要将其存储在服务器端作为用户首选项，并针对已识别的用户配置文件。

如果您需要针对单个浏览器实例进行持久化，而不考虑用户，则可以使用客户端解决方案，如localStorage（用于跨浏览器会话持久化）、sessionStorage（用于在单个浏览器会话中持久化）或Cookie（可配置为任一方式）。

例如，以下是一种使用localStorage来持久化切换状态的解决方案，可在页面重新加载和浏览器会话中保持状态。

此代码无法在SO片段中运行，请参见this Fiddle以获取演示。

Javascript

var menuStateKey = "menu.toggle_nav.state";
$(document).ready(function() {
    var $nav = $("nav");

    var setInitialMenuState = function() {
        // Note: This retrieves a String, not a Boolean.
        var state = localStorage.getItem(menuStateKey) === 'true';
        setNavDisplayState(state);
    };

    var toggleNav = function() {
        var state = $nav.is(':visible');
        state = !state;
        localStorage.setItem(menuStateKey, state);
        setNavDisplayState(state);
    };

    var setNavDisplayState = function(state) {
        if (state) {
            $nav.show();
        } else {
            $nav.hide();
        }
    };

    $("#toggle_nav").click(toggleNav);

    setInitialMenuState();
});

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>I am the nav</nav>
<a href="#" id="toggle_nav" class="sidebar-toggle" data-toggle="offcanvas" role="button">Toggle</a>

- Palpatim

0

您可以将切换状态存储在localStorage对象中。

// Check browser support
if (typeof(Storage) != "undefined") {
    // Store
    localStorage.setItem("toggleState", value);
    // Retrieve
    localStorage.getItem("toggleState");
} else {
    "Sorry, your browser does not support Web Storage...";
}

请查看本地存储 - 深入HTML5

有可用的JQuery插件来方便此操作。

$.localStorage;
storage=$.localStorage;
storage.set('foo','value');
storage.get('foo');

请访问Jquery Storage API以获取更多信息。

祝好！

- Sachin Thapa

0

你可以扩展切换

$.prototype._toggle = $.prototype.toggle;
$.prototype.toggle = function() { 
// save to localStorage
$.prototype._toggle.call(this) 
}

并编写使用localStorage来启动切换的代码

- tkeram

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vinc199789 · Accepted Answer

像评论中所说的那样，您可以使用HTML 5 Web Storage。

您有两种类型：
- localStorage - 存储没有到期日期的数据
- sessionStorage - 存储一个会话的数据

如何设置：
localStorage.setItem("name", "value");

如何获取值：
localStorage.getItem("name");

现在，您可以进行简单的检查，例如：

if (localStorage.getItem("toggle") === null) {
    //hide or show menu by default
    //do not forget to set a htlm5 cookie
}else{
   if(localStorage.getItem("toggle") == "yes"){
     //code when menu is visible
   }else{
     //code when menu is hidden
   }
}

More information here