Question

我想知道是否有人可以请求帮助，我正在使用来自“https://nnattawat.github.io/slideReveal/”的jquery.slidereveal.js代码插件本身可以正常工作，如果我手动点击触发器来打开和关闭菜单。

但我希望它能在页面加载时默认为用户之前点击的状态。

例如，如果他们点击显示然后导航到另一个屏幕，当JS再次加载时，我希望它检查保存到localStorage的最后一个状态，如果是，则自动显示隐藏的面板。

请参阅下面的代码：

$(document).ready(function () {
    var panelOpen = localStorage.getItem("panelOpen");

    if (panelOpen == "true") {
        $("#slidermenu-bar").slideReveal("show");
    }
});

$(function () {
    $("#slidermenu-bar").slideReveal({
        push: false,
        position: "left",
        trigger: $(".handle"),
        shown: function (obj) {
            localStorage.setItem("panelOpen", true);
            obj.find(".handle").html('<span class="glyphicon glyphicon-chevron-left"></span> Open');

        },
        hidden: function (obj) {
            localStorage.setItem("panelOpen", false);
            obj.find(".handle").html('<span class="glyphicon glyphicon-chevron-right"></span> Close');
        }
    });
});

如果有人可以提供协助，我们将不胜感激： - ）

Answer 1

你的代码真的很接近工作。

首先，据我所知，$(document).ready(function () {和$(function () {都是“准备就绪”的版块。
如果它们之间存在差异，那就非常微妙了，因为我从未注意到它！

因此，您可以将所有脚本放在同一个“就绪”块中现在只需在slideReveal 上实例化$("#slidermenu-bar") ，然后检查本地存储空间。

）

Answer 2

感谢Louys Patrice Bessette，它确定了与ready块相关的问题，请参阅下面的工作代码：

var panelOpen = localStorage.getItem("panelOpen");

var slider = $("#slidermenu-bar").slideReveal({
    push: false,
    position: "left",
    trigger: $(".handle"),
    shown: function (obj) {
        localStorage.setItem("panelOpen", true);
        obj.find(".handle").html('<span class="glyphicon glyphicon-chevron-left"></span> Open');

    },
    hidden: function (obj) {
        localStorage.setItem("panelOpen", false);
        obj.find(".handle").html('<span class="glyphicon glyphicon-chevron-right"></span> Close');
    }
});

if (panelOpen == "true") {
    slider.slideReveal("show");
} else {
    slider.slideReveal("hide");
}

jQuery SlideReveal不会显示onLoad

2 个答案: