javascript - 如何制作一个用于级联多个问题和答案的框

Question

我寻求帮助。 我想为包含多个问题和答案的指南创建故障排除，以指导工作人员遵循正确的流程。 我创建了一个示例，但"is"框对我不起作用……我该怎么办？ 问题是，如果我点击是或否，它会返回相同的答案，我必须确保通过点击是我有一个答案，点击否我有另一个与其他框不同的答案

谢谢!

<style>
 ul, #myUL {
 list-style-type: none;
 }

  #myUL {
  margin: 0;
   padding: 0;
   } 

  .box {
 cursor: pointer;
 -webkit-user-select: none; /* Safari 3.1+ */
 -moz-user-select: none; /* Firefox 2+ */
 -ms-user-select: none; /* IE 10+ */
 user-select: none;
 }

.box::before {
 content: "\2610";
 color: black;
 display: inline-block;
 margin-right: 6px;
 }

.check-box::before {
 content: "\2611"; 
 color: dodgerblue;
 }

.nested {
 display: none;
 }

 .active {
  display: block;
  }
  </style>

 <ul id="myUL">
 <li>  beverage?</li>
 <li><span class="box">yes</span>
 <li><span class="box">no</span>
 <ul class="nested">
 <li>eat?</li>
 <li><span class="box">yes</span>
 <li><span class="box">no</span>
 <ul class="nested">
 <li>ecc</li>

<script>
var toggler = document.getElementsByClassName("box");
var i;

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

Answer 1

正确关闭li 和ul 标签

<ul id="myUL">
    <li>beverage?</li>
    <li><span class="box">yes</span>
        <span class="box">no</span>
        <ul class="nested">
            <li>eat?</li>
            <li><span class="box">yes</span>
                <span class="box">no</span>
                <ul class="nested">
                    <li>ecc</li>
                </ul>
            </li>
        </ul>
    </li>
</ul> 

https://jsfiddle.net/lalji1051/erfmjd5v/4/