为什么我的决策树不起作用？答案

【问题标题】：Why is my decision tree not working?为什么我的决策树不起作用？
【发布时间】：2018-02-03 20:42:42
【问题描述】：

我是编码初学者，尤其是 HTML。

我使用了我在网上找到的这段代码的基本布局（我似乎不记得在哪里），但我想要一个与此类似的结构，并想用我自己的数据填充它。

我尝试将来自单独文件、.js 和 .css 部分的所有代码放入 .html 代码中。（我在网上搜索了如何做到这一点，我也不确定jQuery，并在https://www.w3schools.com/jquery/jquery_get_started.asp上发现我可以将它添加到<head>部分而不是下载库？下面的代码不使用jQuery ，但是我不知道怎么用。可以在<script>标签内的.html文件顶部插入吗？

请谁能告诉我为什么这只在我的浏览器上显示为三个项目符号，当我将鼠标悬停在它上面时，鼠标从箭头变为指针，但不点击/展开。

任何帮助将不胜感激！

var tree = document.querySelectorAll('ul.tree a:not(:last-child)');
for (var i = 0; i < tree.length; i++) {
  tree[i].addEventListener('click', function(e) {
    var parent = e.target.parentElement;
    var classList = parent.classList;
    if (classList.contains("open")) {
      classList.remove('open');
      var opensubs = parent.querySelectorAll(':scope .open');
      for (var i = 0; i < opensubs.length; i++) {
        opensubs[i].classList.remove('open');
      }
    } else {
      classList.add('open');
    }
  });
}

body {
  font-family: Arial;
}

ul.tree li {
  list-style-type: none;
  position: relative;
}

ul.tree li ul {
  display: none;
}

ul.tree li.open>ul {
  display: block;
}

ul.tree li a {
  color: black;
  text-decoration: none;
}

ul.tree li a:before {
  height: 1em;
  padding: 0 .1em;
  font-size: .8em;
  display: block;
  position: absolute;
  left: -1.3em;
  top: .2em;
}

ul.tree li>a:not(:last-child):before {
  content: '+';
}

ul.tree li.open>a:not(:last-child):before {
  content: '-';
}

<ul class="tree">
  <li><a href="#">Part 1</a>
    <ul>
      <li><a href="#">Item A</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item B</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item C</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item D</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item E</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
    </ul>
  </li>

  <li><a href="#">Part 2</a>
    <ul>
      <li><a href="#">Item A</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item B</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item C</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item D</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item E</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
    </ul>
  </li>

  <li><a href="#">Part 3</a>
    <ul>
      <li><a href="#">Item A</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item B</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item C</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item D</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item E</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

【问题讨论】：

标签： javascript jquery html css tree

【解决方案1】：

根据https://developer.mozilla.org/en-US/docs/Web/CSS/:scope，:scope 伪元素并未得到广泛支持，但我不确定是否需要它来实现您的目标。事实上，chrome 和 firefox 对我来说工作得很好，我只是在 IE 和 Edge 中看到了一些 javascript 错误 - 没有测试 Safari。

简单地从 javascript 中的打开子元素选择器中删除 :scope 后，此代码在所有经过测试的浏览器中都适用于我，没有 javascript 错误。

var tree = document.querySelectorAll('ul.tree a:not(:last-child)');
for (var i = 0; i < tree.length; i++) {
  tree[i].addEventListener('click', function(e) {
    var parent = e.target.parentElement;
    var classList = parent.classList;
    if (classList.contains("open")) {
      classList.remove('open');
      var opensubs = parent.querySelectorAll('.open');
      for (var i = 0; i < opensubs.length; i++) {
        opensubs[i].classList.remove('open');
      }
    } else {
      classList.add('open');
    }
  });
}

body {
  font-family: Arial;
}

ul.tree li {
  list-style-type: none;
  position: relative;
}

ul.tree li ul {
  display: none;
}

ul.tree li.open>ul {
  display: block;
}

ul.tree li a {
  color: black;
  text-decoration: none;
}

ul.tree li a:before {
  height: 1em;
  padding: 0 .1em;
  font-size: .8em;
  display: block;
  position: absolute;
  left: -1.3em;
  top: .2em;
}

ul.tree li>a:not(:last-child):before {
  content: '+';
}

ul.tree li.open>a:not(:last-child):before {
  content: '-';
}

<ul class="tree">
  <li><a href="#">Part 1</a>
    <ul>
      <li><a href="#">Item A</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item B</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item C</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item D</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item E</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
    </ul>
  </li>

  <li><a href="#">Part 2</a>
    <ul>
      <li><a href="#">Item A</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item B</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item C</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item D</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item E</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
    </ul>
  </li>

  <li><a href="#">Part 3</a>
    <ul>
      <li><a href="#">Item A</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item B</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item C</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item D</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item E</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

【讨论】：

我已经尝试删除 :scope，但仍然得到相同的结果。鼠标从箭头变为单击，但不允许我单击任何内容。
你的问题 sn-p 和这个答案 sn-p 在 Chrome 中都适用于我，你使用的是什么浏览器？
我正在使用 chrome。我似乎无法点击任何东西。