javascript - 仅在桌面重新加载页面后,Bootstrap 4 折叠保存
问题描述
我只想在桌面重新加载页面后保存折叠显示/隐藏。以下示例在使用LocalStorage重新加载页面后的桌面视图时默认打开折叠。
我试过下面的例子。
$(document).ready(function () {
$('a').click(function() {
//store the id of the collapsible element
localStorage.setItem('collapseItem', $(this).attr('href'));
});
var collapseItem = localStorage.getItem('collapseItem');
if (collapseItem) {
$(collapseItem).collapse('show')
}
})
function resize() {
if ($(window).width() > 992) {
$('.link').click(function() {
//store the id of the collapsible element
localStorage.setItem('collapseItem', $(this).attr('href'));
});
var collapseItem = localStorage.getItem('collapseItem');
if (collapseItem) {
$(collapseItem).collapse('show')
}
} else {
}
}
$(document).ready(function() {
$(window).resize(resize);
resize();
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<p>
<a class="btn btn-primary link" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
</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>
解决方案
您的代码似乎正确。您只需$(document).ready
要从顶部删除第一个函数,因为您已经调用了底部。另外,我已经更新了$(window).resize
.
function resize() {
var collapseItem = localStorage.getItem('collapseItem');
if ($(window).width() > 992) {
if (collapseItem) {
$(collapseItem).collapse('show');
}
} else {
if (collapseItem) {
$(collapseItem).collapse('hide');
localStorage.clear();
}
}
}
$(document).ready(function () {
resize();
$('.link').click(function () {
//store the id of the collapsible element
if(localStorage.getItem("collapseItem") !== null) {
localStorage.clear();
} else {
localStorage.setItem('collapseItem', $(this).attr('href'));
}
});
});
$(window).resize(resize);
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<p>
<a class="btn btn-primary link" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false"
aria-controls="collapseExample">
Link with href
</a>
</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>
</body>
</html>
请在删除浏览器 localStorage 后尝试该代码。
我希望这有帮助。
推荐阅读
- r - R中快速机器上的运行时间非常慢
- r - Shinyjs:[添加|删除]类在模块中不起作用
- python - 在 Python 中将产量数分成小于阈值的部分
- java - android java AudioTrack 缓冲区大小没有意义
- r - 如何在 Knime 中导入 R 代码
- php - 参数必须是数组或实现了 Countable 的对象
- asp.net-mvc-4 - 在 Asp.net Core 应用程序中接收 wcf 回调
- android - 返回按钮 钛金属
- java - .intersect 在 android 工作室
- java - 我无法使用 setAttribute 和空格获取所有字符串