Блог

Это меню боковой панели, и до сих пор оно закрывает вкладки каждый раз, когда я перезагружаю страницу, и это довольно раздражает, что я должен добавить, чтобы исправить это?

вот фрагмент кода, написанный ручкой

_menu.html.erb

 <div  id="mySidepanel" class="sidepanel">
 <button class="closebtn" onclick="closeNav()"><i class="fas fa-times-circle"></i></button>

    <div class="dropdown-container">
    <%= link_to "Journal", "#", class: "drop-item" %>
    <%= link_to "Stats","#", class: "drop-item" %>
    </div>

    <li class="dropdown-btn">Suppliers
      <i class="fa fa-caret-down"></i>
    </li>

    <div class="dropdown-container">
        <%= link_to "Add a supplier", "#",  class: "drop-item" %>
        <%= link_to "Suppliers", "#",  class: "drop-item" %>
    </div>

    <%= link_to "Orders", "#",  class: "list-item" %>
    <%= link_to "Users", "#",  class: "list-item" %>
</div>
  

sidebar.js

редактировать, добавлен весь код, я не использую раскрывающийся список начальной загрузки

 $(document).on('turbolinks:load', function() {

      if ($('.dropdown-btn')){
          activeTab = document.getElementsByClassName('active')[0].dataset.activeDropdown.myArticles
          sessionStorage.setItem('foo', activeTab);
      } 
      if(activeTab){
          $('#mySidepanel a[href="'   activeTab   '"]').tab('show');
      }
    var dropdown = document.getElementsByClassName("dropdown-btn");
    var i; 

    for (i = 0; i < dropdown.length; i  ) {
      dropdown[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var dropdownContent = this.nextElementSibling;
      if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
      } else {
      dropdownContent.style.display = "block";
      }
      });
    }
});


function openNav() {
  document.getElementById("mySidepanel").style.width = "180px";
}

function closeNav() {
  document.getElementById("mySidepanel").style.width = "0";
}
  

Обновить

Я добавил этот js-код, но мне понадобится помощь :

 $('.drop-item').on('shown.bs.tab', function (e) {
    localStorage.setItem('activeTab', $(e.target).attr('href'));
});

var activeTab = localStorage.getItem('activeTab');
if(activeTab){
    $('#mySidepanel a[href="'   activeTab   '"]').tab('show');
}
  

Вы должны использовать sessionStorage (я думаю, что хранилища для сеанса достаточно для того, что вы хотите сделать).

При изменении на вкладке сохраните значение вашей вкладки (например, его идентификатор):

localStorage.setItem('tabId', 'foo');

Затем, при загрузке страницы, если ваш ключ существует, откройте вашу вкладку. С jQuery должно быть что-то вроде этого:

 $(function(){
   if (localStorage.getItem('tabId') !== null) {
      document.getElementById(localStorage.getItem('tabId')).show();
   }
}
  

Чтобы дать вам представление. Это не более чище, чем есть. Например, вам следует переписать свою openNav функцию, чтобы она принимала параметр (значение localStorage)