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

У меня есть вопрос о древовидном представлении в чистых файлах HTML/CSS/JS. Я могу успешно создать древовидное представление с помощью 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, в первый раз, когда я нажимаю на учебники, этот список открывается без проблем, но после этого, когда я нажимаю на один из вложенных списков в нем (веб-разработка ) закрывается все дерево из туториалов.

javascript html css treeview

14.03.2019 14:35

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 192

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

TY мой друг, я прочитал вашу ссылку, но я пишу ее шаг за шагом по этой ссылке w3schools.com/howto/howto_js_treeview.asp я новичок в js, я хочу учиться, создавая что-то, поэтому, если вы можете помочь мне другим способом, я очень вам благодарен

— 14.03.2019 14:48

Хорошо, мы должны пойти глубже :). проблема здесь в том, что вы привязываете событие к элементу ul. Но в примере событие привязано к элементу внутри элемента ul, поэтому this.parentElement возвращает правильный элемент с классом .nested.

— 14.03.2019 14:55

14.03.2019 14:44

Ответ принят как подходящий

Во-первых, ваш 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>

Спасибо мой друг за решение моей проблемы

— 15.03.2019 23:20

14.03.2019 15:03