php - 如何保存响应式菜单打开/关闭值？

Question

我们最近更改了前端并开始使用 Metronic 响应式主题。

我有一个左侧菜单，例如：

在此处输入图像描述

现在，如果您单击菜单的左上角，这是响应式的，它会像这样完美地调整大小：

在此处输入图像描述

问题是即使您调整了它的大小（例如：小），当您单击链接时（或刷新页面时），无论大小如何，它都会自动显示大菜单。

if (resize) {  use -> page-header-fixed page-sidebar-closed }  
else {   use ->page-header-fixed }

我知道它一定是这样的，但是如何在 php 中实现呢？

编辑：我在 index.php 中有一个 body 类，例如：

    </head>
    <body class="page-header-fixed">
    <?include "left.php"?>

left.php 是具有左侧菜单的页面。body 类是我需要检查的 css 类

score 3 · Accepted Answer

在任何情况下，您都需要一个变量来存储菜单的状态，即大或小。

如果你想用 PHP 来做，你可以使用会话变量并在调整菜单大小时使用 ajax 来更新该值。

或者，您可以出于相同目的使用 Javascript 设置 cookie。我会选择这个选项。

无论哪种方式，您都需要检查 cookie / session var 的值并根据它更改菜单的类别。

- -编辑 - -

或者正如我们尊敬的程序员伙伴所说，使用 localStorage 可能是一个好主意，因为不需要将信息发送到服务器。

score 3 · Accepted Answer

在选择 css 类之前，您可能应该添加另一个 js 条件来测试最小 offsetWidth。

否则，我想知道您是否@media min-width在这两个类上都添加了响应式 CSS page-header-fixed page-sidebar-closed，.

如果您的 JS 没有覆盖这些类，CSS 应该可以让您的菜单保持“小尺寸”外观。

score 3 · Accepted Answer

此设置是否必须存储在您的数据库中？如果没有，为什么不使用localStorage并仅使用 JavaScript 来管理它？

我不知道你的菜单代码，但如果你能看到它的打开和关闭事件，你可以使用：

window.localStorage.setItem("menu", 1); // 1: open - 2: closed

然后在页面加载时阅读：

window.localStorage.getItem("menu");

无需向服务器设置 ajax 请求，也无需设置 cookie 之类的废话。

3 回答 3