Question

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

我有一个左侧菜单，如：

enter image description here

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

enter image description here

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

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 class是我需要检查的css类

Answer 1

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

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

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

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

--- --- EDIT

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

Answer 2

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

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

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

Answer 3

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

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

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

然后在页面加载时读取它：

window.localStorage.getItem("menu");

无需向服务器设置ajax请求，也不需要设置cookie和那种垃圾。