我的目标是建立一个动态的FAQ页面，其中的问题是可见的，当你点击所说的问题的div与答案将出现。 一旦您再次单击div，它将再次切换。 我尝试了一些事情，我完成的最好的结果是切换第一个问题的答案，而不管点击了什么问题。
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<link href="./img/favicon.png" rel="shortcut icon"/>
<meta charset="utf-8"/>
<meta content="width=1280, maximum-scale=1.0" name="viewport"/>
<link th:href="@{css/faq.css}" rel="stylesheet" type="text/css"/>
<link th:href="@{css/faq-new.css}" rel="stylesheet" type="text/css"/>
</head>
<body style="margin: 0;
background: rgba(255, 255, 255, 1.0);">
<input id="anPageName" name="page" type="hidden" value="faq"/>
<div class="faq">
<th:block th:insert="_header.html :: header"></th:block>
<div class="rectangle2">
</div>
<div class="justaskus">
Just Ask Us
</div>
<!-------========= FAQ =========------------->
<div class="faq-container">
<div class="th-start" th:block th:each="faqType, stats : ${faqTypeDaoList}">
<div class="q-type-wrapper">
<div class="type-header">
<h4 th:text="${faqType.faqTypeName}"></h4>
</div>
<!----========= Question ========--------->
<div class="th-wrap" th:each="question, stat: ${faqTypeDaoList[_${stats.index}_].faqList}">
<a href="#">
<div id="box" class="question-box">
<div class="bullet"></div>
<img th:src="@{img/artboard-copy-3-unnamed-3@2x.png}" class="arrow"/>
<img th:src="@{img/artboard-copy-3-unnamed-13@2x.png}" class="unnamed" style="display:none;"/>
<div class="questions" th:text="${faqTypeDaoList[_${stats.index}].faqList[${stat.index}_].question}"></div>
<div id="answers" class="dropdown-answer" th:text="${faqTypeDaoList[_${stats.index}].faqList[${stat.index}_].answer}"></div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function() {
$('#box').on("click", ()=> {
$(this).children[3].toggle();
});
});
</script>
这是我当前的代码，它完全不做任何事情。 下面是我做的一些尝试
/* One attempt */
$('.questions').on("click",function(){
// "this" in $(this) --> means the current clicked element
// .find() will search the CHILDREN of the clicked element with the class "sub-nav"
$(this).find("dropdown-answer").toggle();
});
/* Another attempt. This one toggled only the first question's answer regardless if what button was clicked. */
var click = document.getElementById("dropdown-answer");
if(click.style.display === "none") {
click.style.display = "block";
}
else {
click.style.display = "none";
}
这有可能吗？
find()将在您提供的元素中查找子元素（因此，在本例中，您将this放入其中，从而生成.questions)，但您的.dropdown-answer不是该元素的子元素。
你可以这样写
$(this " + .dropdown-answer").toggle();
或者将该元素放在.questions元素中，并按如下方式获取该元素
$(this).find(".dropdown-answer").toggle();
