0

Добрый вечер. Написал код для раскрывания 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>

2 ответа 2

1

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

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>

8
  • Спасибо!!!!!!!!!!!!
    – savage
    24 апр 2021 в 19:50
  • Вопрос еще один, а если к примеру в li будет еще раскрывающий список как это можно будет реализовать?
    – savage
    24 апр 2021 в 19:53
  • Ну для этого вам нужно будет обратить внимание на состояние внутреннего. И обрабатывать корректно клик родителя чтоб он не скрывался при клике вложенной папки 24 апр 2021 в 20:08
  • Пример чуток усложниться но терпимо 24 апр 2021 в 20:09
  • Конечно вернее обрабатывать списки а не его элементы. Так чтоб кликая только на заголовок открывалась либо закрывалась папка. Тогда проблем с вложениями не будет 24 апр 2021 в 20:11
0

Думаю как-то так лучше реализовать.
Так же в элементе <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>

2
  • Спасибо!!!!!!!!!!!!
    – savage
    24 апр 2021 в 19:50
  • Я обновил код, во втором списке будет еще один с возможность открытия. 24 апр 2021 в 21:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.