Почему localStorage передает active только из первого списка, а из последующих игнорирует?

Question

[Дамир Даутов]

Есть аккордеон меню.

<div class="mini-menu">
 <ul>
    <li style="list-style-type: none;"><a href="#">Каталог товаров</a></li>
    <li class="sub2"><a href="#"><i class="fa fa-angle-down" aria-hidden="true"></i>&nbsp;&nbsp;Летний детский трикотаж</a>
    <ul>
    <li class="sub3"><a href="#" class="active">&nbsp;&nbsp;Летняя верхняя одежда 2018!!!</a>
  </li>
    <li class="sub3 active1"><a href="#" class="active">&nbsp;&nbsp;Летние головные уборы 2018</a>
  </li>
  </ul>
  </li>
    <li class="sub2"><a href="#"><i class="fa fa-angle-down" aria-hidden="true"></i>&nbsp;&nbsp;Теплые принадлежности</a>
    <ul>
    <li class="sub3"><a href="#" class="active">&nbsp;&nbsp;Пинетки, носки, шарфы, одеяло…</a>
  </li>
  </ul>
  </li>
  </ul>
</div>

Хочу передать чтоб при нажатии выделялся выбранный элемент, добавил

$(document).ready(function () {
       
  $('.sub3').on('click', function() {
  $('.sub3').removeClass('active1');
  $(this).addClass('active1');
  var sub3Count = $(this).index();
  localStorage.setItem('LCount', sub3Count);
});

var _this = localStorage.getItem("LCount");

if ( _this === null ) { return false } else {
  $('.sub3').eq(_this).addClass('active1');
}
    });

И

.active1 {
	background:#ffd800;
}

В первом списке работает корректно, а вот когда кликаешь на какой то элемент из второго списка то уже active1 передается опять верхнему списку.
вот пример

Answer 1

[0xD34F]

Проблема не localStorage, а в том, что вы не до конца понимаете, как работает метод index. Если вызывать его без аргументов, то будет возвращён индекс элемента относительно его соседей. А вовсе не на странице в целом, как вам сейчас кажется.

Какие есть варианты решения вашей проблемы:

• Собирать индексы на всех уровнях вложенности, вместо одного числа будете хранить массив
  
• Вместо индексов использовать id (лично мне это видится наиболее предпочтительным вариантом - при изменении структуры меню информация о выбранном пункте останется корректной)
  
• Ну и наконец, самый лёгкий и простой способ - воспользоваться методом index соответственно вашей задумке, замените $(this).index() на $('.sub3').index(this) (за подробностями - в документацию)
  

Comments

[Дамир Даутов]

Большое спасибо. Я понял.