Question

我对纯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文件中级联（打开/关闭）它们时遇到问题，第一次单击教程时，该列表将打开而没有任何问题，但是之后，当我单击其中的一个嵌套列表时（网络开发）教程中的所有树都将关闭。

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。

js中的树状视图（纯HTML / CSS / JS）问题

2 个答案: