作为一项练习，我正在尝试创建一个小型问答应用程序，其中一部分是问题卡。在这些卡片上，我有一个问题，然后有一个显示答案的按钮。当点击按钮时，答案(在HTML DOM中还不存在，因此不可见(将显示出来，下一次点击时，答案应该会再次隐藏。基本上它会看起来像这样：
点击显示答案之前
点击显示答案后
这是HTML代码：
<section class="question-card">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam vitae
labore repudiandae tenetur. Qui maiores animi quibusdam voluptatum
nobis. Nam aperiam voluptatum dolorem quia minima assumenda velit libero
saepe repellat. Tempore delectus deleniti libero aliquid rem velit illum
expedita nostrum quam optio maiores officiis consequatur ea, sint enim
cum repudiandae inventore ab nemo?
</p>
<div class="bookmark">
<i class="fa-regular fa-bookmark fa-lg"></i>
</div>
<button class="answer-button" data-js="answer-button">Show Answer</button>
<ul class="answer-container" data-js="answer-container">
</ul>
<div class="container-categories">
<button class="category-button category-html">#html</button>
<button class="category-button category-flexbox">#flexbox</button>
<button class="category-button category-css">#css</button>
<button class="category-button category-js">#js</button>
</div>
</section>
我为"显示答案"按钮添加了一个EventListener，当单击它时，它会在已经存在的ul中添加一个列表项。我已经用innerHTML:做到了这一点
const answerButton = document.querySelector(".answer-button");
const answerContainer = document.querySelector(".answer-container");
const answer1 = "Lorem ipsum dolor sit amet consectetur adipisicing elit.";
answerButton.addEventListener("click", () => {
answerContainer.innerHTML = `<li class="show-answer">${answer1}</li>`;
});
现在，我似乎无法做到的是在再次点击按钮时隐藏答案(下一个挑战是，在第一次点击后，按钮会将文本更改为"隐藏答案"，但我还不知道如何处理(。我得到的最接近的是：
answerButton.addEventListener("click", () => {
answerContainer.innerHTML = `<li class="show-answer">${answer1}</li>`;
answerContainer.classList.toggle("hide-answer");
});
然而，这个方法首先显示.hide答案类，之后两个类被切换，一切都是应该的。所以在第一次点击后，答案仍然是隐藏的，只有在第二次点击后按钮的行为才是我想要的。
我也试过这个：
answerButton.addEventListener("click", () => {
answerContainer.innerHTML = `<li class="hide-answer">${answer1}</li>`;
answerContainer.classList.toggle("show-answer");
});
但出于某种原因，这显示了具有所有CSS属性的容器，但没有文本：
答案容器在那里，但没有文本
这是两个类的CSS(显示答案和隐藏答案(：
.show-answer {
background-color: hotpink;
border-radius: 7px;
border: none;
list-style: none;
width: 50%;
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px;
}
.hide-answer {
display: none;
}
如果有人知道我如何才能得到我需要的结果，我将不胜感激。。。
您将answer-container与answer-container的子元素(innerHtml<li>元素(混合在一起。
-
最初有一个可见但为空的
<ul class="answer-container"></ul>。 -
下一步，单击按钮，将内容添加到
answer-container中，期望它通过show-answer类可见 -
紧接着，将
hide-answer类添加到<ul class="answer-container">父元素中，从而隐藏新添加的内容。 -
再次单击按钮，您终于看到了答案，因为容器元素关闭了
hide-answer类。
您可以通过先隐藏answer-container，然后继续切换容器的显示来解决此问题。您也可以使用DOM元素的hidden属性来执行此操作，就像我在下面的代码片段中所做的那样，我在这里举了您的确切示例，并修改了答案容器，使其从hidden开始，并在单击时切换隐藏属性。你可以用CSS显示做同样的事情：也没有类。
const answerButton = document.querySelector(".answer-button");
const answerContainer = document.querySelector(".answer-container");
const answer1 = "Lorem ipsum dolor sit amet consectetur adipisicing elit.";
answerButton.addEventListener("click", () => {
answerContainer.innerHTML = `<li class="answer">${answer1}</li>`;
answerContainer.hidden = !answerContainer.hidden;
});.answer {
background-color: hotpink;
border-radius: 7px;
border: none;
list-style: none;
width: 50%;
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<section class="question-card">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam vitae
labore repudiandae tenetur. Qui maiores animi quibusdam voluptatum
nobis. Nam aperiam voluptatum dolorem quia minima assumenda velit libero
saepe repellat. Tempore delectus deleniti libero aliquid rem velit illum
expedita nostrum quam optio maiores officiis consequatur ea, sint enim
cum repudiandae inventore ab nemo?
</p>
<div class="bookmark">
<i class="fa-regular fa-bookmark fa-lg"></i>
</div>
<button class="answer-button" data-js="answer-button">Show Answer</button>
<ul class="answer-container" hidden data-js="answer-container">
</ul>
<div class="container-categories">
<button class="category-button category-html">#html</button>
<button class="category-button category-flexbox">#flexbox</button>
<button class="category-button category-css">#css</button>
<button class="category-button category-js">#js</button>
</div>
</section>这样的东西行吗？
您只需使用容器是否具有类show-answer来确定答案是否需要显示或隐藏
answerButton.addEventListener("click", () => {
if (answerContainer.classList.contains('show-answer')) {
// container has `showing` class
// hide the answer
answerContainer.innerHTML = ``; // ? - my guess, not sure how to want to hide it
}else{
// container doesn't have `showing` class
// show the answer
answerContainer.innerHTML = `<li class="hide-answer">${answer1}</li>`;
};
// update class
answerContainer.classList.toggle("show-answer");
});