Развернуть список 4-х уровневый список в Laravel

130

03 августа 2021, 19:40

Всем привет, помогите пожалуйста реализовать данный скрипт. Есть 4 уровненный список через цикл в виде Laravel. Необходимо чтобы при клике открывался список с последующей категории. Пример как необходимо Авито

Песочница

Answer 1

Не стал разбирать ваш код, но вот набросал пример

let lis = document.querySelectorAll('li'); 
 
lis.forEach(el => { 
  el.addEventListener('click', (e) => { 
    e.stopPropagation(); 
    if (el.children.length > 0) { 
      el.children[0].style.display = el.children[0].style.display === 'none' ? 'block' : 'none'; 
    } 
  }) 
});

li { 
  list-style: none; 
  cursor: pointer; 
} 
 
li>ul { 
  display: none; 
}

<ul> 
  <li class="parent"> 
    уровень1 - 1 --- 4 уровня 
    <ul style="display: none"> 
      <li class="parent"> 
        подпункт 1 --- 4 уровня 
        <ul style="display: none"> 
          <li>подпункт 1</li> 
          <li>подпункт 2 --- 4 уровня 
            <ul style="display: none"> 
              <li>подпункт 1</li> 
              <li>подпункт 2</li> 
              <li>подпункт 3</li> 
            </ul> 
          </li> 
          <li>подпункт 3</li> 
        </ul> 
      </li> 
      <li class="parent"> 
        подпункт 2 
        <ul style="display: none"> 
          <li>подпункт 1</li> 
          <li>подпункт 2</li> 
          <li>подпункт 3</li> 
        </ul> 
      </li> 
      <li class="parent"> 
        подпункт 3 
        <ul style="display: none"> 
          <li>подпункт 1</li> 
          <li>подпункт 2</li> 
          <li>подпункт 3</li> 
        </ul> 
      </li> 
    </ul> 
  </li> 
  <li class="parent"> 
    уровень1 - 2 
    <ul style="display: none"> 
      <li class="parent"> 
        подпункт 1 
        <ul style="display: none"> 
          <li>подпункт 1</li> 
          <li>подпункт 2</li> 
          <li>подпункт 3</li> 
        </ul> 
      </li> 
      <li class="parent"> 
        подпункт 2 
        <ul style="display: none"> 
          <li>подпункт 1</li> 
          <li>подпункт 2</li> 
          <li>подпункт 3</li> 
        </ul> 
      </li> 
      <li class="parent"> 
        подпункт 3 
        <ul style="display: none"> 
          <li>подпункт 1</li> 
          <li>подпункт 2</li> 
          <li>подпункт 3</li> 
        </ul> 
      </li> 
    </ul> 
  </li> 
  <li class="parent"> 
    уровень1 - 3 
    <ul style="display: none"> 
      <li class="parent"> 
        подпункт 1 
        <ul style="display: none"> 
          <li>подпункт 1</li> 
          <li>подпункт 2</li> 
          <li>подпункт 3</li> 
        </ul> 
      </li> 
      <li class="parent"> 
        подпункт 2 
        <ul style="display: none"> 
          <li>подпункт 1</li> 
          <li>подпункт 2</li> 
          <li>подпункт 3</li> 
        </ul> 
      </li> 
      <li class="parent"> 
        подпункт 3 
        <ul style="display: none"> 
          <li>подпункт 1</li> 
          <li>подпункт 2</li> 
          <li>подпункт 3</li> 
        </ul> 
      </li> 
    </ul> 
  </li> 
</ul>

Код №2 с проверкой на ul

let lis = document.querySelectorAll('li'); 
 
lis.forEach(el => { 
  el.addEventListener('click', (e) => { 
    e.stopPropagation(); 
    let children = el.children; 
    for(var i = 0; i < children.length; i++){ 
    	if(children[i].nodeName.toLowerCase() === 'ul'){ 
      children[i].style.display = children[i].style.display === 'none' ? 'block' : 'none'; 
      } 
    }; 
    
  }) 
});

li { 
  list-style: none; 
  cursor: pointer; 
} 
 
li>ul { 
  display: none; 
}

  <li class="parent"> 
    <a href="#">уровень1 - 2</a> 
    <ul style="display: none"> 
      <li class="parent"> 
       <a href="#">подпункт 1</a> 
        <ul style="display: none"> 
          <li><a href="#">подпункт 1</a></li> 
          <li><a href="">подпункт 2</a></li> 
          <li><a href="#">подпункт 3</a></li> 
        </ul> 
      </li> 
      <li class="parent"> 
        <a href="#">подпункт 2</a> 
        <ul style="display: none"> 
          <li><a href="#">подпункт 1</a></li> 
              <li class="parent"> 
             <a href="#">подподпункт 1</a> 
            <ul style="display: none"> 
              <li><a href="#">подпункт 1</a></li> 
 
              <li><a href="#">подпункт 2</a></li> 
              <li><a href="#">подпункт 3</a></li> 
            </ul> 
          </li> 
          <li><a href="#">подпункт 2</a></li> 
          <li><a href="#">подпункт 3</a></li> 
        </ul> 
      </li> 
      <li class="parent"> 
        <a href="#">подпункт 3</a> 
        <ul style="display: none"> 
          <li><a href="#">подпункт 1</a></li> 
          <li><a href="#">подпункт 2</a></li> 
          <li><a href="#">подпункт 3</a></li> 
        </ul> 
      </li> 
    </ul> 
  </li> 
  <li class="parent"> 
    <a href="#">уровень1 - 3</a> 
    <ul style="display: none"> 
      <li class="parent"> 
        <a href="#">подпункт 1 
        <ul style="display: none"> 
          <li><a href="#">подпункт 1</a></li> 
          <li><a href="#">подпункт 2</a></li> 
          <li><a href="#">подпункт 3</a></li> 
        </ul> 
      </li> 
      <li class="parent"> 
        подпункт 2 
        <ul style="display: none"> 
          <li><a href="#">подпункт 1</a></li> 
          <li><a href="#">подпункт 2</a></li> 
          <li><a href="#">подпункт 3</a></li> 
        </ul> 
      </li> 
      <li class="parent"> 
        <a href="#">подпункт 3 
        <ul style="display: none"> 
          <li><a href="#">подпункт 1</a></li> 
          <li><a href="#">подпункт 2</a></li> 
          <li><a href="#">подпункт 3</a></li> 
        </ul> 
      </li> 
    </ul> 
  </li> 
</ul>

Создание интернет-магазина электроники в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Wordpress некоторые картинки битые, не отображаются. Но не все

Wordpress некоторые картинки битые, не отображаются

138

HTML

Статические файлы CSS Django

Не могу подключить статические файлы к шаблонам HTML в DjangoЯ новичок в Django и не особо в это вник, но, однако, на моём прошлом тестовом проекте...

255

Переход с C# на VB.NET

Пытаюсь переписать функцию с C# на язык VBNET и столкнулся с проблемой при отладки

359

Хочу двойной прыжок

Пытался сделать двойной прыжок, ну или одиночный еще точно не знаю, а у меня персонаж летает, ну то есть прыгает сколько хочетУ меня уже стоит...

258