Javascript-为什么我的隐藏/显示html代码不起作用

我希望能够单击类问题框并隐藏/显示类答案，因此我使用querySelectorAll创建了一个类数组来选择问题框类，然后使用for Each循环通过数组进行循环，然后我创建了另一个变量，每个变量包含每个问题和答案，然后我将eventlistener函数附加到questions类，这样当您单击该类时，它会隐藏/显示答案

下面是一个示例代码

HTML

---

请提供任何帮助

您的问题是循环中的选择器与循环项目无关：

let-toggleBox=document.queryselectoral（“.questionBox”）；
toggleBox.forEach（项=>{
设x=item.querySelector（“.questions”）；
设y=item.querySelector（“.answers”）；
x、 addEventListener（'单击'，函数（））{
如果（y.style.display==“无”）{
y、 style.display=“块”
}
否则{
y、 style.display=“无”
}
})
})

.questionBox{
边框底部：1px纯黑；
填充：10px0；
}
.答案{
显示：无；
}

我可以邀请多少团队成员

您最多可以在免费计划中邀请2名其他用户。高级计划对团队成员没有限制。
我可以邀请多少团队成员

您最多可以在免费计划中邀请2名其他用户。高级计划对团队成员没有限制。
我可以邀请多少团队成员

您最多可以在免费计划中邀请2名其他用户。高级计划对团队成员没有限制。
我可以邀请多少团队成员

您最多可以在免费计划中邀请2名其他用户。高级计划对团队成员没有限制。

您基本上是在寻找渲染块吗？js部分位于HTML部分的上方还是下方？您可以将其放在前面以取消阻止渲染块。您的答案有什么不同？我看到代码与document.querySelector（）完全相同。querySelector（）与item.querySelector（）完全相同。非常感谢，@网友它解决了问题，这是一个结束sight@netizen另一个挑战是，这段代码在小屏幕上工作得很好，但在大屏幕上却不工作，事实上，鼠标悬停时的光标效果在大屏幕上不起作用，但在小屏幕上效果很好screen@seun我刚刚在全屏上运行了这个代码片段，它对我很有用。我需要在一个问题上单击两次，但这是代码中的另一个问题，我的问题只是显示选择器的错误

<div class="questionBox">
 <div class="questions">
  <p>How many team members can I invite?</p>
                        <!-- <div class="arrows"></div> -->
 </div>
 <div class="answers">You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.</div>
 </div>
 
<div class="questionBox">
 <div class="questions">
  <p>How many team members can I invite?</p>
                        <!-- <div class="arrows"></div> -->
 </div>
 <div class="answers">You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.</div>
 </div>
    
<div class="questionBox">
 <div class="questions">
  <p>How many team members can I invite?</p>
                        <!-- <div class="arrows"></div> -->
 </div>
 <div class="answers">You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.</div>
 </div>
    
<div class="questionBox">
 <div class="questions">
  <p>How many team members can I invite?</p>
                        <!-- <div class="arrows"></div> -->
 </div>
 <div class="answers">You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.</div>
 </div>

css
.questionBox{
    border-bottom: 1px solid black;
    padding: 10px 0;
}

.answers{
    display: none;
}

js

let toggleBox = document.querySelectorAll(".questionBox");

toggleBox.forEach(item =>{
    let x = document.querySelector(".questions");
    let y = document.querySelector(".answers");

    x.addEventListener('click', function(){
        if(y.style.display === "none"){
            y.style.display = "block"
        }
        else{
            y.style.display = "none"
        }
    })
})