jquery - Button Toggle Bootstrap 刷新后保持状态
问题描述
我有三个切换按钮,我想在刷新页面后保持切换状态。我读了很多东西,但不知道如何在我的情况下使用它们。
这是按钮和 div
<button class="badge badge-danger mb-4 d-flex left" type="button" data-toggle="collapse" data-target="#personal-data" aria-expanded="false" aria-controls="personal-data"></button>
<button class="badge badge-danger mb-4 mr-md-4 ml-md-4" type="button" data-toggle="collapse" data-target="#email-change" aria-expanded="false" aria-controls="email-change"></button>
<button class="badge badge-danger mb-4" type="button" data-toggle="collapse" data-target="#user-history" aria-expanded="false" aria-controls="user-history"></button>
<div class="collapse" id="personal-data">
<div class="form-group col-12">
<div class="col-12">
<div class="collapse" id="email-change">
<div class="col-12">
<div class="collapse" id="user-history">
解决方案
使用可以使用以下方式在刷新后保持状态。
- 曲奇饼
- 本地存储
这两者都可以存储客户端数据,这些数据将保留您的状态。
为整个网站的每个折叠元素提供一个唯一的 ID,这样就不会有冲突的余地。因此,根据用户操作折叠或取消折叠元素,您将更新存储中的状态。现在使用引导事件和 API,您可以根据存储状态折叠或取消折叠元素。
这是一个工作演示: https ://jsfiddle.net/c1ovt5g4/
<button class="badge badge-danger left" type="button" data-toggle="collapse" data-target="#personal-data" aria-expanded="false" aria-controls="personal-data">Personal Data</button>
<button class="badge badge-danger " type="button" data-toggle="collapse" data-target="#email-change" aria-expanded="false" aria-controls="email-change">Email Change</button>
<button class="badge badge-danger" type="button" data-toggle="collapse" data-target="#user-history" aria-expanded="false" aria-controls="user-history">User History</button>
<div class="collapse" id="personal-data"> PERSONAL DATA</div>
<div class="collapse" id="email-change"> EMAIL CHANGE</div>
<div class="collapse" id="user-history">USER HISTORY</div>
$(".collapse").on("hidden.bs.collapse", function() {
localStorage.setItem("coll_" + this.id, false);
});
$(".collapse").on("shown.bs.collapse", function() {
localStorage.setItem("coll_" + this.id, true);
});
$(".collapse").each(function() {
if (localStorage.getItem("coll_" + this.id) == "true") {
$(this).collapse("show");
}
});
推荐阅读
- angular - 如何在 Angular 7 中使用 ChangeDetection(视图未更新)?
- angular - Angular RXJS 结构化 observables
- amazon-web-services - Redshift 中的 Unload 命令语法错误
- angular - Cypress 中的侧导航栏
- c# - 此导出到 excel 不起作用,它只会添加列
- ansible - 有没有办法让这个变量在变量中起作用?
- c# - 在接口上模拟扩展方法
- java - 两个控制器类之间的 JavaFX 通信
- authentication - 如何使用 Tikkie API 进行身份验证?
- queue - 如何修复 queue_log 文件中缺少的 BLINDTRANSFER 和 ATTENDEDTRANSFER 日志条目?