как использовать localStorage, чтобы свернуть 2 меню или больше элементов - PullRequest
Новая
       9

как использовать localStorage, чтобы свернуть 2 меню или больше элементов

0 голосов
/ 14 июля 2020

У меня проблема с этим кодом. Я могу заставить браузер запоминать выбор клиента для каждой кнопки, и каждая из них имеет очень длинный код. Теперь у меня есть этот список, когда я нажимаю один. Из него появляется раскрывающееся меню, и код работает правильно, пока при использовании локального хранилища я не пробовал все, а теперь при открытии списка и перезапуске загрузки страницы два списка открываются вместе, а когда один закрывается, они закрываются вместе. Я пробовал все, например, делал большой l oop и как собирал более одного магазина вместе, и пробовал Jeson, я не знаю, как пропустить это

JS CODE 

  // Child Elements In Menu Sidebar
  let toggleChild = document.querySelectorAll('.show'),
menuChild = document.querySelectorAll('.hideChild'),
menuChilds = [];
storeSubMenu = localStorage.getItem('subMenu',null);
storeSubMenut = localStorage.getItem('subMenut',null);
const enableSubMenu = elem => {
    elem.nextElementSibling.classList.remove('hideChild');
    elem.firstElementChild.classList.add('active');
   
    localStorage.setItem('subMenu','enabled');
    storeSubMenut = localStorage.getItem('subMenut','enabled');

};
const disableSubMenu = elem => {
    elem.nextElementSibling.classList.add('hideChild');
    elem.firstElementChild.classList.remove('active')
    
    localStorage.setItem('subMenu',null);
};

   for(i = 0 ; i <= menuChilds.length +1 ; i++ ){
    if (storeSubMenu == 'enabled') {
        enableSubMenu(toggleChild[i]);
    } else {
        disableSubMenu(toggleChild[i]);
    }
   }
  
 toggleChild.forEach((item , index)=> {
   
item.addEventListener('click', () => {
    storeSubMenu = localStorage.getItem('subMenu');
    nextElement  = item.nextElementSibling;
    if (nextElement.classList.contains('hideChild')) {
        enableSubMenu(item);
        menuChilds.push(document.querySelectorAll('.hideChild').length);
    } else {
        disableSubMenu(item);
        menuChilds.pop();
    }
})
   
  })

Это HTML КОД 

<div data-sotre="in" class="sidebar">
  <div class="content-area">
    <div class="headOfside">
      <h1 class="c-headOfside">لوحة التحكم</h1>
    </div>
    <div class="menu">
      <ul class="linksmain">
        <li><a href="#" class="show">
            الصفحات
            <i class="fas fa-arrow-circle-left"></i>
          </a>
          <ul class="min-ul-pages child-links hideChild">
            <li>
              <a href="?page=pages&mainpages=chiefeo">
                الرئيس التنفيذي
              </a>
            </li>
            <li>
              <a href="#">
                رعاية المؤسسات
              </a>
            </li>
            <li>
              <a href="#">
                طاقم الشركة
              </a>
            </li>
          </ul>
        </li>
        <li><a href="#" class="show">
            التحكم
            <i class="fas fa-arrow-circle-left"></i>
          </a>
          <ul class="min-ul-management child-links hideChild">
            <li>
              <a href="#">
                تعديل طاقم الشركة
              </a>

            </li>
            <li>
              <a href="#">
                المستشفيات والمواعيد
              </a></li>
            <li>
              <a href="#">
                تعديل المديرين
              </a></li>
            
          </ul>
        </li>
        <li>
          <ul class="colors-change">
            <li  class="flatreddark" data-color="red"></li>
            <li  class="purpledark" data-color="purple"></li>
            <li  class="yellowlight" data-color="yellow"></li>
            <li  class="deffault" data-color="deffault"></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

Пожалуйста, я не использую Jquery, поэтому, если у вас есть ответ, избегайте Jquery

...