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

367

08 августа 2017, 13:55

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

<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 находятся на одном уровне

Answer 1

Простая реализация выглядит так (для примера только по 1 менюшке на 1li,2li,3li для каждого меню соответственно, для даты можно использовать слова что будет проще если менюшек много):

$('li').on('click', function(){ 
    //Удаляем активный класс с прошлого элемента в кликнутой таблице 
    $(this).parent().find('.active').removeClass('active'); 
    //Добавляем класс 
    $(this).addClass('active'); 
    //Определяем какое меню показать через data которая записанна в li 
    $('.dropdown_'+$(this).data('menu')).removeClass('hide'); 
});

.active{ 
    background-color: green; 
} 
.wrapper{ 
    display: flex; 
    flex-wrap: nowrap; 
    justify-content: flex-start; 
} 
.hide{ 
    display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="wrapper"> 
    <ul class="principaly"> 
      <li data-menu="1">Text</li> 
      <li>Text2</li> 
      <li>Text3</li> 
      <li>Text4</li> 
    </ul> 
    <ul class="dropdown_1 hide"> 
      <li>Text1ForDropdown_1</li> 
      <li data-menu="2">Text2ForDropdown_1</li> 
      <li>Text3ForDropdown_1</li> 
      <li>Text4ForDropdown_1</li> 
    </ul> 
    <ul class="dropdown_2 hide"> 
      <li>Text1ForDropdown2</li> 
      <li>Text2ForDropdown2</li> 
      <li data-menu="3">Text3ForDropdown2</li> 
      <li>Text4ForDropdown2</li> 
    </ul> 
    <ul class="dropdown_3 hide"> 
      <li>Text1ForDropdown3</li> 
      <li>Text2ForDropdown3</li> 
      <li>Text3ForDropdown3</li> 
      <li>Text4ForDropdown3</li> 
    </ul> 
</div>