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

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

我的代码是在这里

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'); 
}); 
});

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

来源

2017-04-26 Rohit Sharma

因此，您希望页面状态在页面刷新之间持续存在？如果是这样，你需要传递一些查询字符串参数，其中包含有关刷新页面时状态的信息，然后再读取它们并对其执行操作，或者需要服务器端语言来维护状态（使用会话，数据库等），或者你可以在浏览器上使用LocalStorage进行调查。 – ADyson

可以使用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/

来源

2017-04-26 11:14:40

谢谢！它运作良好。 –

尝试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'); 
    }); 
});

来源

2017-04-26 11:15:27

谢谢它也在工作！ –

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

回答

相关问题