Кнопка Toggle Bootstrap Keep State после обновления - PullRequest
Новая
       33

Кнопка Toggle Bootstrap Keep State после обновления

1 голос
/ 20 мая 2019

У меня есть три кнопки переключения, и я хочу сохранить состояние переключения после обновления страницы. Я читаю много вещей, но не знаю, как использовать их в моем случае.

Это кнопки и деления 

    <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">

1 Ответ

2 голосов
/ 20 мая 2019

Использование можно использовать ниже для сохранения состояния после обновления.

  • Cookie
  • LocalStorage

Оба из них могут хранить данные на стороне клиентакоторый сохранит ваше состояние.

Предоставьте каждому элементу свертывания уникальный идентификатор на веб-сайте, чтобы не было места для конфликта.Поэтому, основываясь на действиях пользователя, можно свернуть или развернуть элемент, который вы обновите в хранилище.Теперь, используя событие начальной загрузки и 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");
  }
});
...