Как сделать цепочку выбора на JS?

Question

[DeniSidorenko]

Добрый вечер. Есть такой код

<ul class="principaly">
  <li class='active'>Text</li>
  <li>Text2</li>
  <li>Text3</li>
  <li>Text4</li>
</ul>

<ul class="dropdown_1">
  <li>Text1ForDropdown_1</li>
  <li class='active'>Text2ForDropdown_1</li>
  <li>Text3ForDropdown_1</li>
  <li>Text4ForDropdown_1</li>
</ul>
<ul class="dropdown_2">
  <li>Text1ForDropdown2</li>
  <li>Text2ForDropdown2</li>
  <li class='active'>Text3ForDropdown2</li>
  <li>Text4ForDropdown2</li>
</ul>
<ul class="dropdown_3">
  <li>Text1ForDropdown3</li>
  <li class='active'>Text2ForDropdown3</li>
  <li>Text3ForDropdown3</li>
  <li>Text4ForDropdown3</li>
</ul>

Есть 4 менюшки. в ней li. Как можно заметить только у одного элемента есть класс active. Он выдается при клике на элемент и для каждой менюшки имеется только 1 li с классом active. Вот в чем суть. Изначально только первое меню открыто. Человек нажал на один элемент, li выдает класс active и актрывается вторая, потом на вторую выбрал и открывается 3.

Вот примерная реализация на одном сайте. Подскажите пожалуйста как мне такое сделать? с моей структурой. Все ul находятся на одном уровне

Comments

[Павел Корнилов]

Задачу не понял. Сначала подумал, что нужен скрипт меню аккордеон, потом засомневался...

[Сергей Сергей]

В вопросе уже есть последовательность действий, проблема в коде?
Изначально можно стилями скрыть три списка, на каждый элемент li повесить обработчик клика с действиям по присвоению класса active себе и по отображению следующего списка.
На jquery функции:
.click
.addClass
.show

С мобилки пишу, накодить не могу.

[DeniSidorenko]

KorniloFF: KorniloFF: К примеру скриншот. Пользователь выбрал Vehilcles, открывается второе меню, он выбрал, потом открывается 3 , на 3 он выбрал, и открывается 4. Изначально только первая имеет display: block, остальные display: none

[DeniSidorenko]

Сергей Сергей: Да вы правы, и последовательность я знаю, только вот код думаю получиться для каждого списка писать, хотя их макс будет 4.

[Stalker_RED]

DeniSidorenko: Зачем для каждого?

[Сергей Сергей]

DeniSidorenko:сначала для каждого списка, потом одинаковые части оформятся в функцию с параметрами.
Так прогать учатся.

Answer 1

[Stalker_RED]

<ul class="active" data-level="1">
  <li data-show="a">третий уровень есть только здесь</li>
  <li data-show="b">b жми любой</li>
  <li data-show="c">c жми любой</li>
</ul>

<ul id="a" data-level="2">
  <li data-show="aa">aa</li>
  <li data-show="ab">третий уровень здесь</li>
  <li data-show="ac">и здесь</li>
</ul>
  ...

Array.prototype.forEach.call(
  document.querySelectorAll('li'),
  li => li.addEventListener('click', function(){
    var target = document.getElementById(this.dataset.show)
    for (var lvl = +target.dataset.level; lvl < 5; lvl++) {
      var active = document.querySelectorAll(`[data-level="${lvl}"].active`)
      Array.prototype.forEach.call(active, el=>el.classList.remove('active'))
    }
    target.classList.toggle('active')
  })
)

https://jsfiddle.net/3msh2kea/

Answer 2

[Сергей Сергей]

Вспомогательные функции, короткие – легко понять.

function qsa( s, n ) {
  return [].slice.call( (n || document).querySelectorAll( s ), 0 );
}
function eachqsa( c, s, n ) {
  qsa( s, n ).forEach( c );
}
function show( el ) {
  if( !el ) return;
  el.style.display = 'block';
}
function activate( li ) {
  li.classList.add( 'active' );
}
function deactivate( li ) {
  li.classList.remove( 'active' );
}
function proc( li, next ) {
  eachqsa( deactivate, '.active', li.parentNode );
  activate( li );
  show( next );
}

Далее инициализация

function procbind( lis, nexts ) { // привязывающая функция
  var next = qsa( nexts ).pop();
  function onclick() {
    proc( this, next );
  }
  function bind( li ) {
    li.onclick = onclick;
  }
  eachqsa( bind, lis );
}
// привязка по группам
procbind( '.principaly li', '.dropdown_1' );
procbind( '.dropdown_1 li', '.dropdown_2' );
procbind( '.dropdown_2 li', '.dropdown_3' );
procbind( '.dropdown_3 li', '.dropdown_4' );

Разбиение на мелкие функции для лучшего понимания.