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

我请求帮助。 我想创建一个带有多个问题和答案的故障排除指南，以指导工人遵循正确的流程。 我创建了一个示例，但“是”框不适用于我。。。我该怎么办？

---

问题是，如果我单击“是”或“否”，它将返回相同的答案，我必须确保通过单击“是”我有一个答案，单击“否”，我在其他框中有另一个不同的答案

谢谢大家!

<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>

ul，#myUL{
列表样式类型：无；
}
#密尔{
保证金：0；
填充：0；
} 
.盒子{
光标：指针；
-webkit用户选择：无；/*Safari 3.1+*/
-moz用户选择：无；/*Firefox 2+*/
-ms用户选择：无；/*IE 10+*/
用户选择：无；
}
.box：：之前{
内容：“\2610”；
颜色：黑色；
显示：内联块；
右边距：6px；
}
.复选框：：之前{
内容：“\2611”；
颜色：淡蓝色；
}
.嵌套{
显示：无；
}
.主动{
显示：块；
}

饮料
对
没有

吃什么
对
没有

ecc
var-toggler=document.getElementsByClassName（“框”）；
var i；
对于（i=0；i

正确关闭

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> 

饮料
对
不

吃什么
对
不

ecc

---

我不认为

元素应该这样使用。
这里有一个可供选择的用户界面需要考虑：

//声明问题数组和结果对象以供参考
让问题=[
{id:“q1”，终端：false，yes:“q2”，no:“q5”}，
{id:“q2”，终端：false，yes:“q3”，no:“q4”}，
{id:“q3”，终端：true，yes:“result3y”，no:“result3n”}，
{id:“q4”，终端：true，yes:“result4y”，no:“result4n”}，
{id:“q5”，终端：false，yes:“q6”，no:“q7”}，
{id:“q6”，终端：true，yes:“result6y”，no:“result6n”}，
{id:“q7”，终端：true，yes:“result7y”，no:“result7n”}
];
让结果={
结果3y：“蓝色”，
结果3n：“绿色”，
结果4y：“红色”，
结果4n:“黄色”，
结果6y：“黑色”，
结果6n：“白色”，
结果7y：“棕色”，
结果7n：“灰色”
};
//当用户单击页面时运行processResult函数
document.addEventListener（“单击”，processResponse）；
函数processResponse（event）{/`event`是触发函数的单击
//确保在继续之前单击了一个框
if（event.target.classList.contains（“框”））{
//标识HTML元素（以及“响应”数据属性）
常数
box=event.target，
问题=box.parentElement，
response=box.dataset.response，
boxAndSibling=question.queryselectoral（“.box”），
同级=响应==“否”？boxAndSibling[0]：boxAndSibling[1]，
resultDisplay=document.getElementById（“结果”）；
//确保在继续之前未选中其他框
如果（！sibling.classList.contains（“复选框”））{
box.classList.add（“复选框”）；
//在数组中查找问题
对于（让我们来提问）{
if（quest.id==question.id）{
//显示终端问题的结果
if（任务终端）{
结果=任务[响应]；
resultDisplay.innerHTML=`Secret color:${results[result]}`；
}
//否则会出现下一个问题
否则{
const next=document.getElementById（quest[response]）；
next.classList.add（“active”）；
}
}
}
}
}
}

ul{列表样式类型：无；}
#myUL{margin:0；padding:0；}
.盒子{
光标：指针；-webkit用户选择：无；-moz用户选择：无；
-ms用户选择：无；用户选择：无；
}
.box:：在{内容：“\2610”；颜色：黑色；显示：内联块；右边距：6px；}
.复选框：：在{内容：“\2611”；颜色：dodgerblue；}之前
.nested{显示：无；}
.active{显示：块；}
#结果{font size:2em；}

动物？

是

否

哺乳动物？

是

否

鸭嘴兽？

是

否

鱼？

是

否

蔬菜？

是

否

块茎？

是

否

真菌？

是

否

问题在于，如果我单击“是”或“否”，它会返回相同的答案，我必须确保通过单击“是”我有一个答案，单击“否”我有另一个与其他框不同的答案。问题是，如果我单击“是”或“否”，它会返回相同的答案，我必须确保通过单击“是”我有一个答案，单击“否”我有另一个与其他框不同的答案我们就快到了，我希望可以通过相同的单击删除答案。可能吗？因为在本例中，一旦将标志插入框中，就无法再删除。。此项工作适用于能够根据客户问题验证程序的员工。最后的结果能被删除吗？我需要它给客户支持人员。当然，您只需分配一个空字符串（“”），而不是结果，例如：

resultDisplay.innerHTML=“”

。好的，取消选中该框吗？在本例中，我无法从框中删除标志。。。谢谢哦，您可以像以前一样使用

classList.toggle（）

，而不是

classList.add（）

。我更改了它，因为我认为

.toggle（）

提供了不直观的行为（remo