Как сохранить текущий Аккордеон активным при обновлении страницы в Bootstrap - PullRequest
Новая
       13

Как сохранить текущий Аккордеон активным при обновлении страницы в Bootstrap

0 голосов
/ 16 июня 2019

У меня следующий код Аккордеона. Код работает нормально. Я хочу сохранить выбранную вкладку активной при обновлении страницы. Но JavaScript, который я добавил, не работает. Я не понимаю, в чем именно проблема. Пожалуйста, помогите мне с решением. Спасибо ... 

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Javascript 

<script type="text/javascript">
$(document).ready(function(){
    $('button[data-toggle="collapse"]').on('shown.bs.collapse', function(e) {
        localStorage.setItem('activeTab', $(e.target).attr('data-target'));
    });
    var activeTab = localStorage.getItem('activeTab');
    if(activeTab){
        $('#accordionExample button[data-target="' + activeTab + '"]').collapse('show');
    }
});
</script>

1 Ответ

1 голос
/ 16 июня 2019

Сначала вы добавляете идентификатор (какой div вы хотите показать) в сеансе. Затем после перезагрузки вы просто получите сессию. и показать текущий div с помощью js. Вот мой код для этого. 

$(document).ready(function() {
  // Get saved data from sessionStorage
  let selectedCollapse = sessionStorage.getItem('selectedCollapse');
  if(selectedCollapse != null) {
    $('.accordion .collapse').removeClass('show');
    $(selectedCollapse).addClass('show');
  }
  //To set, which one will be opened
  $('.accordion .btn-link').on('click', function(){ 
    let target = $(this).data('target');
    //Save data to sessionStorage
    sessionStorage.setItem('selectedCollapse', target);
  });
});

Заметьте, я видел ваш код. Я думаю, что вы использовали bootstrap и jquery. Для выполнения действий avobe вам необходим хотя бы jquery.

Я не знаю, это правильный путь или нет. Но это будет работать как-то.

...