Проблема представления дерева (чистый HTML / CSS / JS) в js

Question

У меня есть вопрос о представлении дерева в чистых файлах HTML / CSS / JS. Я могу успешно сделать Tree view с HTML / CSS и получить помощь от w3school, вы можете увидеть мой код здесь: HTML-файл:

var toggler = document.getElementsByClassName("caret");
var i;

for (i = 0; i < toggler.length; i++) {
  toggler[i].addEventListener("click", function() {
  this.parentElement.querySelector(".nested").classList.toggle("active");
  this.classList.toggle("caret-down");
 })
}

ul, .menu {
 list-style-type: none;
}
.menu {
  margin: 0;
  padding: 0;
}
.menu a {
  text-decoration: none;
}
.caret {
  cursor: pointer;
  user-select: none; /* Prevent text selection */
}
.caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}
.caret-down::before {
  transform: rotate(90deg);
}
.nested {
  display: none;
}
 .active {
  display: block;
}

<ul class="menu">
<li><a href="#"><i class="fa fa-home"></i> Home</a></li>
<li class="caret">
  <a href="javascript:void(0);"><i class="fa fa-graduation-cap"></i> Tutorial</a>
  <ul class="nested">
    <li class="caret">
      <a href="javascript:void(0);"><i class="fa fa-chrome"></i> Web Development</a>
      <ul class="nested">
        <li><a href="#">Blog Project</a></li>
        <li><a href="#">CMS Project</a></li>
        <li><a href="#">Shop Project</a></li>
        <li><a href="#">E-learning Project</a></li>
        <li><a href="#">Automasion Project</a></li>
      </ul>
    </li>
    <li class="caret">
      <a href="javascript:void(0);"><i class="fa fa-server"></i> Network</a>
      <ul class="nested">
        <li><a href="#">Comptia</a></li>
        <li><a href="#">Windows</a></li>
        <li><a href="#">Linux</a></li>
        <li><a href="#">CISCO</a></li>
        <li><a href="#">MicroTik</a></li>
        <li><a href="#">Virtualization</a></li>
        <li><a href="#">Security</a></li>
      </ul>
    </li>
    <li class="caret">
      <a href="javascript:void(0);"><i class="fa fa-microchip"></i> IOT</a>
      <ul class="nested">
        <li><a href="#">Concept</a></li>
        <li><a href="#">Electronic</a></li>
        <li><a href="#">Sensor</a></li>
      </ul>
    </li>
  </ul>
</li>
<li><a href="#"><i class="fa fa-archive"></i> Projects</a></li>
<li><a href="#"><i class="fa fa-info-circle"></i> Resume</a></li>
<li><a href="#"><i class="fa fa-envelope-open"></i> Contact me</a></li>

Но у меня есть проблема в каскадном (открытии / закрытии) их в js-файле, при первом нажатии на учебники этот список открывается без проблем, но после этого, когда я нажимаю на один из вложенных списков в нем (веб-разработка) все дерево из учебников закрывается.

Answer 1

Во-первых, ваш JS верен, этот this.parentElement.querySelector(".nested") всегда нацелен на первый <ul>, просто попробуйте удалить класс каретки из <li> и поместить его в <a>, это главное, что клик будет привязан к <a> вместо <li>. или поместите его внутрь <span>, как хотите, он также работает. Смотрите фрагмент кода ниже:

var toggler = document.getElementsByClassName("caret");
var i;

for (i = 0; i < toggler.length; i++) {
  toggler[i].addEventListener("click", function() {
  this.parentElement.querySelector(".nested").classList.toggle("active");
  this.classList.toggle("caret-down");
 })
}

ul, .menu {
 list-style-type: none;
}
.menu {
  margin: 0;
  padding: 0;
}
.menu a {
  text-decoration: none;
}
.caret {
  cursor: pointer;
  user-select: none; /* Prevent text selection */
}
.caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}
.caret-down::before {
  transform: rotate(90deg);
}
.nested {
  display: none;
}
 .active {
  display: block;
}

<ul class="menu">
<li><a href="#"><i class="fa fa-home"></i> Home</a></li>
<li>
  <a class="caret" href="javascript:void(0);"><i class="fa fa-graduation-cap"></i> Tutorial</a>
  <ul class="nested">
    <li>
      <a class="caret" href="javascript:void(0);"><i class="fa fa-chrome"></i> Web Development</a>
      <ul class="nested">
        <li><a href="#">Blog Project</a></li>
        <li><a href="#">CMS Project</a></li>
        <li><a href="#">Shop Project</a></li>
        <li><a href="#">E-learning Project</a></li>
        <li><a href="#">Automasion Project</a></li>
      </ul>
    </li>
    <li>
      <a class="caret" href="javascript:void(0);"><i class="fa fa-server"></i> Network</a>
      <ul class="nested">
        <li><a href="#">Comptia</a></li>
        <li><a href="#">Windows</a></li>
        <li><a href="#">Linux</a></li>
        <li><a href="#">CISCO</a></li>
        <li><a href="#">MicroTik</a></li>
        <li><a href="#">Virtualization</a></li>
        <li><a href="#">Security</a></li>
      </ul>
    </li>
    <li>
      <a class="caret" href="javascript:void(0);"><i class="fa fa-microchip"></i> IOT</a>
      <ul class="nested">
        <li><a href="#">Concept</a></li>
        <li><a href="#">Electronic</a></li>
        <li><a href="#">Sensor</a></li>
      </ul>
    </li>
  </ul>
</li>
<li><a href="#"><i class="fa fa-archive"></i> Projects</a></li>
<li><a href="#"><i class="fa fa-info-circle"></i> Resume</a></li>
<li><a href="#"><i class="fa fa-envelope-open"></i> Contact me</a></li>

Answer 2

Проблема в том, что вы связываете событие с элементом ul. когда щелчок произошел, он взял this.parentElement (это элемент, к которому был привязан клик), так что это более высокий уровень HTML, чем вам нужно. Поместите класс каретки на элемент внутри li. И следующая проблема заключается в том, что они используют элемент span, а вы используете элемент, который выполняет перенаправление по умолчанию, поэтому также необходим stopPropagation.