javascript - 如何在重新加载 Bootstrap 5 时保存折叠状态
问题描述
我是引导程序和 javascript 的新手。如何保存折叠状态以使状态保持页面刷新?
<p>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Collapse Button
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Makers Academy engineering project has commenced. We have had a great experience so far with rails and now feel like we are getting to grips with the more complicated aspects. This guide is a quick introduction into adding likes to posts.
</div>
</div>
而我的 Javascript 尝试不起作用。
$(document).ready(function () {
$(".collapse").on("shown.bs.collapse", function () {
localStorage.setItem("coll_" + this.id, true);
});
$(".collapse").on("hidden.bs.collapse", function () {
localStorage.removeItem("coll_" + this.id);
});
$(".collapse").each(function () {
if (localStorage.getItem("coll_" + this.id) === "true") {
$(this).collapse("show");
}
else {
$(this).collapse("hide");
}
});
});
解决方案
它确实有效 - 见这个小提琴。
我看到你正在使用$
符号 - 所以你也需要加载 jQuery。确保它之前加载bootstrap.js
。
推荐阅读
- c++ - 从数组 C++ 中删除类
- c# - 为什么即使单元测试全部通过,我的代码覆盖率也为零?
- android - 为什么我尝试发送数据时出现“setCommandByIoctl failed”?
- javascript - 在应用程序组件中添加类或钩子
- python - python:从json字符串中获取特定值
- api - 为团队通话创建 Microsoft Graph API 通知
- node.js - Nodejs - 小型 Express 服务器 + trayicon + pkg
- unreal-engine4 - UE4 网格距离场
- python - 合并后数据重复
- reactjs - 是的,对具有相同名称的两个输入字段进行验证