Question

在我的网络应用程序中，有一个非常大的左侧菜单。我已经放了一个按钮来缩小它。当我点击按钮时，一切正常，我的菜单被隐藏，另一个小菜单正在显示。当我点击小菜单中的任何链接时，会加载另一个页面并显示大菜单。如果我想再次看到小菜单，我需要点击按钮。我希望如果加载了任何页面，菜单应该显示在最后一页的最后一个表格中（如果它在最后一页上的大表格中也可能很大）。

我的代码在这里

HTML

<div class="flLeft similarHeight">
    <ul class="nav metismenu" id="side-menu">
        <li class="nav-header">
            <div class="logo"><a href="index.html">Brand Name</a></div>
        </li>
    </ul>
</div>
<div class="flLeftsmall">
    <ul class="nav smallnavigation">
        <li class="nav-header">
            <div class="logo"><a href="index.html">Brand</a></div>
        </li>
    </ul>
</div>
<div class="pull-left">
    <span><i class="glyphicon glyphicon-triangle-left menu-big"></i></span>
</div>

CSS

.flLeft {
    background:#1b3b5e;
    width: 220px;
    height: 200px;
}
.flLeftsmall {
    display: none;
    background:#1b3b5e;
    width: 80px;
    height: 200px;
    color: #fff;
}
a{color: #fff;}

的jQuery

$(document).ready(function () {
$('.menu-big').click(function () {
    $(this).toggleClass('glyphicon-triangle-right glyphicon-triangle-left');
    $('.flLeft').toggle('slide');
    $('.flLeftsmall').toggle('slide');
});
});

我正在使用bootstrap和jQuery插件你可以看到我的jsfiddle here 请帮帮我。

Answer 1

可以使用sessionStorage或LocalStorage来实现。它并不优雅，但它确实有效。

在点击事件中折叠菜单，添加一个存储项以保存菜单状态

sessionStorage.setItem('menuSize', 'small'); // Or big etc, will need to break this up into two click events.

然后在随后的页面上，检查此存储项目以查看用户是否选择了较小或较大的菜单。

if (sessionStorage.getItem('menuSize') == 'small') {
    $('.flLeft').css("display", "none");
    $('.flLeftsmall').css("display", "block");
}

更新了小提琴：https://jsfiddle.net/5vjf0ffs/2/

Answer 2

尝试this

使用localStorage.存储一个值，然后用它来检查我们是否显示小盒子或大盒子。

$(document).ready(function() {
  if (localStorage.getItem("slide") == "small") {

    $('.flLeft').toggle('slide');
    $('.flLeftsmall').toggle('slide');
  }

  $('.menu-big').click(function() {
    $(this).toggleClass('glyphicon-triangle-right glyphicon-triangle-left');
    if (localStorage.getItem("slide") == null) {
      localStorage.setItem("slide", "small");
    } else {
      localStorage.removeItem("slide");
    }

    $('.flLeft').toggle('slide');
    $('.flLeftsmall').toggle('slide');
  });
});

即使使用javascript更改页面，如何保持相同元素的更改？

2 个答案: