按钮切换 Bootstrap 刷新后保持状态 [英] Button Toggle Bootstrap Keep State After Refresh
问题描述
我有三个切换按钮,我想在刷新页面后保持切换状态.我读了很多东西,但不知道如何在我的情况下使用它们.
这是按钮和 div
<button class="badge badger-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="徽章徽章-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 badger-danger mb-4" type="button" data-toggle="collapse" data-target="#user-history" aria-expanded="false" aria-controls="user-历史"></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 badger-danger left" type="button" data-toggle="collapse" data-target="#personal-data"aria-expanded="false" aria-controls="personal-data">个人数据</button><button class="徽章徽章-danger" type="button" data-toggle="collapse" data-target="#email-change" aria-expanded="false" aria-controls="email-change">电子邮件更改</button><button class="badge badger-danger" type="button" data-toggle="collapse" data-target="#user-history" aria-expanded="false" aria-controls="user-history">用户历史<div class="collapse" id="personal-data">个人数据
<div class="collapse" id="email-change">电子邮件更改
<div class="collapse" id="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");}});
I have three toggle buttons and I want to keep toggle state after refresh page.I read many things but dont know how to use them in my case.
This is buttons and divs
<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">
Use can use below way to keep state after a refresh.
- Cookie
- LocalStorage
Both of these can store client-side data which will preserve your state.
Provide each collapse element a unique id across the website so there'll be no room for conflict. So based on user action collapse or un-collapses an element you'll update state in storage. Now using bootstrap event and API, you can collapse or un-collapses an element based on storage state.
Here is a working demo: 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");
}
});
这篇关于按钮切换 Bootstrap 刷新后保持状态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!