在我的侧边栏中，我包含了一个折叠按钮以显示/隐藏表单。现在，我想在刷新页面时保持折叠状态：如果在刷新页面之前表单未折叠，则刷新后必须保持这种状态。
我想我需要在JavaScript中使用localStrorage，但实际上我不知道如何使用它。
这是我的HTML：
<!-- Sidebar -->
<ul class="sidebar navbar-nav">
<li class="nav-item active">
<a class="nav-link" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
<i class="fa fa-filter"></i>
<span>Search Filter</span>
</a>
</li>
</ul>
<!-- Form -->
<div class="collapse" id="collapseExample">
<form>
......
</form>
我只找到了一些代码，但似乎对我不起作用..：
var shown = []
// On collapse
shown.remove($(this).attr('id'));
localStorage.setItem('shown', shown);
// On open
shown.push($(this).attr('id'));
localStorage.setItem('shown', shown);
// On page load
var shown = localStorage.getItem('shown');
for (var s in shown) {
$('#collapseExample' + s).show();
}
谢谢你的帮助！
这是一个有效的Bootstrap 4折叠示例。与入门模板的主要区别在于，我将jQuery导入移动到了文件的顶部，以便可以使用document.load函数。我已经在代码中添加了注释，但是如果仍然不清楚，请继续提出问题。请注意，我留下了原始的javascript答案以供历史评论，以防万一对您有帮助。
我从这里使用了初始页面：https : //getbootstrap.com/docs/4.0/getting-started/introduction/
这是第一个折叠示例：https：//getbootstrap.com/docs/4.0/components/collapse/
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
<!-- jQuery -->
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script>
$(function() {
// store a reference to the collapse div so that
// we don't have to keep looking it up in the dom
const collapseExample = $("#collapseExample");
// register a callback function to the collapse div that
// will be called every time the collapse is opened.
collapseExample.on("shown.bs.collapse", function() {
// since we know that that this function is called on
// open, we'll set the localStorage value to "show"
localStorage.setItem("collapseExample", "show");
});
// register a callback function to the collapse div that
// will be called every time the collapse is closed.
collapseExample.on("hidden.bs.collapse", function() {
// since we know that that this function is called on
// open, we'll set the localStorage value to "hide"
localStorage.setItem("collapseExample", "hide");
});
// Since this function runs on page load (meaning only once), we can
// check the value of localStorage from here and then call the
// bootstrap collapse methods ourselves:
// Check the value of the localStorage item
const showExampleCollapse = localStorage.getItem("collapseExample");
// Manipulate the collapse based on the value of the localStorage item.
// Note that the value is determined by lines 36 or 44. If you change those,
// then make sure to check that the comparison on the next line is still valid.
if (showExampleCollapse === "show") {
collapseExample.collapse("show");
} else {
collapseExample.collapse("hide");
}
});
</script>
</head>
<body>
<main>
<p>
<a
class="btn btn-primary"
data-toggle="collapse"
href="#collapseExample"
role="button"
aria-expanded="false"
aria-controls="collapseExample"
>
Link with href
</a>
<button
class="btn btn-primary"
type="button"
data-toggle="collapse"
data-target="#collapseExample"
aria-expanded="false"
aria-controls="collapseExample"
>
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</main>
<!-- Optional JavaScript -->
<!-- Popper.js, then Bootstrap JS -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
</body>
</html>
结束自举答案
BEGIN VANILLA JAVASCRIPT答案
这是您似乎想做的基本的独立版本。它虽然不漂亮，但希望它很清楚。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
function getCollapsed() {
const state = localStorage.getItem('collapsed');
if(state === 'collapsed'){
return true;
}
return false;
}
function getStatus(){
const resultDiv = document.getElementById('result');
const isCollapsed = getCollapsed();
if(isCollapsed){
resultDiv.innerHTML = "collapsed";
}else{
resultDiv.innerHTML = "un-collapsed";
}
}
function toggleCollapse(){
const isCollapsed = getCollapsed();
if(isCollapsed){
localStorage.setItem('collapsed', 'un-collapsed');
}else{
localStorage.setItem('collapsed', 'collapsed');
}
getStatus();
}
</script>
</head>
<body onload="getStatus()">
<div>
<button onclick="toggleCollapse()">Toggle Collapse</button>
</div>
<div id="result"></div>
</body>
</html>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句