Универсальный скрипт для раскрывающего списка ul li на js

Question

Добрый вечер. Написал код для раскрывания ul на li. Но проблема что он работает на все ul на странице, хотелось бы универсальность, как можно сделать чтоб при нажатии на 1 ul на странице не раскрывался второй, и т.д

let btn = document.querySelector(".list > ul");
for (let a = 0; a < btn.length; a++);   
addEventListener("click", btnClick);
    function btnClick(){
        let tab = document.querySelectorAll("li");
        for (let i  = 0; i < tab.length; i++){
        console.log(tab.classList);
        tab[i].classList.toggle("tabs");
    };
};

html,body{
    margin: 0;
    padding: 0;
}
.list{
    width: 300px;
    width: 300px;
}
ul > li {
  display: none;
}

ul > li.hide {
  display: none;
  
}
.tabs1{
  display: block;
  animation: fadeIn 1s ease;
}
.tabs{
  display: block;
  animation: fadeIn 1s ease;
  
}


@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

<div class="list">
<ul >Папка 1
    <li class="aaa">roman</li>
    <li>ыфы</li>
    <li>тыква</li>
    <li>гуль</li>
    <li>Никита</li>
    <li>шашлык</li>
</ul>
<ul >Папка 2
    <li >roman</li>
    <li>фыв</li>
    <li>тыква</li>
    <li>гуль</li>
    <li>Никита</li>
    <li>шашлык</li>
</ul>
</div>

Answer 1

Думаю как-то так лучше реализовать.
Так же в элементе <ul> может содержаться только элементы <li>.

document.body.addEventListener("click", (e) =>
{
  if (e.target.classList.contains("spoiler__btn"))
  {
    e.target.closest(".spoiler-wrap").classList.toggle("spoiler--open");
  }
})

.spoiler-wrap > .spoiler__btn
{
  cursor: pointer;
}

.spoiler-wrap > .spoiler__btn::after
{
  content: "(Закрыто)";
  margin-left: 10px;
}

.spoiler-wrap.spoiler--open > .spoiler__btn::after
{
  content: "(Открыто)";
  margin-left: 10px;
}

.spoiler-wrap.spoiler--open > .spoiler-content
{
  display: block;
}

.spoiler-content
{
  display: none;
  animation: fadeIn 1s ease;
}


@keyframes fadeIn
{
  from
  {
    opacity: 0;
  }

  to
  {
    opacity: 1;
  }
}

<div class="spoiler-wrap">
  <div class="spoiler__btn">Папка 1</div>
  <div class="spoiler-content">
    <ul>
      <li class="aaa">roman</li>
      <li>ыфы</li>
      <li>тыква</li>
      <li>гуль</li>
      <li>Никита</li>
      <li>шашлык</li>
    </ul>
  </div>
</div>

<div class="spoiler-wrap">
  <div class="spoiler__btn">Папка 2</div>
  <div class="spoiler-content">
    <ul>
      <li>roman</li>
      <li>фыв</li>
      <li>
        <div class="spoiler-wrap">
          <div class="spoiler__btn">тыква</div>
          <div class="spoiler-content">
            <ul>
              <li>roman</li>
              <li>фыв</li>
              <li>тыква</li>
              <li>гуль</li>
              <li>Никита</li>
              <li>шашлык</li>
            </ul>
          </div>
        </div>
      </li>
      <li>гуль</li>
      <li>Никита</li>
      <li>шашлык</li>
    </ul>
  </div>
</div>

Answer 2

Вот так думаю вы хотели чтоб работало. Ваш код с минимальными изменениями

let btns = document.querySelectorAll(".list > ul");

[...btns].forEach(btn=>btn.addEventListener("click", btnClick));
   

function btnClick(){
    let tab = this.querySelectorAll("li");
    for (let i  = 0; i < tab.length; i++){
      console.log(tab[i].classList);
      tab[i].classList.toggle("tabs");
    };
}

html,body{
margin: 0;
padding: 0;
}
.list{
width: 300px;
width: 300px;
}
ul > li {
  display: none;
}

ul > li.hide {
  display: none;
  
}
.tabs1{
  display: block;
  animation: fadeIn 1s ease;
}
.tabs{
  display: block;
  animation: fadeIn 1s ease;
  
}


@keyframes fadeIn {
  from {
opacity: 0;
  }

  to {
opacity: 1;
  }
}

<div class="list">
<ul >Папка 1
    <li class="aaa">roman</li>
    <li>ыфы</li>
    <li>тыква</li>
    <li>гуль</li>
    <li>Никита</li>
    <li>шашлык</li>
</ul>
<ul >Папка 2
    <li >roman</li>
    <li>фыв</li>
    <li>тыква</li>
    <li>гуль</li>
    <li>Никита</li>
    <li>шашлык</li>
</ul>
</div>

БЛОГ НА HUSL

Универсальный скрипт для раскрывающего списка ul li на js

Ответы (2 шт):