如何用JS Event Listener实现点击按钮切换文本显示隐藏？

问题根源 #

原代码每次点击按钮都会新建一个<p>元素并添加到按钮内，导致重复创建；且没有判断元素是否存在的逻辑，无法实现隐藏。另外，将块级元素<p>放入行内元素<span>中不符合HTML规范，需要调整DOM结构。

修改后的代码 #

JavaScript 部分

const faqData = [
  {
    id: 1,
    question: "Who are we?",
    answer:
      "We enable upscaling careers through flexible, interactive and collaborative learning. We believe in building learning communities by bringing together mentors, young minds, and creators.",
  }
];

let accordianBody = document.querySelector('h1');
function createFaq() {
  // 创建FAQ标题
  let firstQuery = document.createElement('h3');
  firstQuery.textContent = faqData[0].question;
  accordianBody.appendChild(firstQuery).className = "faq";

  // 创建切换按钮
  let plusOne = document.createElement('span');
  plusOne.textContent = "+";
  plusOne.className = "show_btn";
  firstQuery.appendChild(plusOne);

  // 提前创建答案元素（初始隐藏）
  let ans1 = document.createElement('p');
  ans1.textContent = faqData[0].answer;
  ans1.className = "faq-answer";
  firstQuery.appendChild(ans1);

  // 添加点击事件监听
  plusOne.addEventListener('click', toggleAnswer);

  function toggleAnswer() {
    // 切换答案的显示/隐藏状态
    ans1.classList.toggle('active');
    // 切换按钮文本
    plusOne.textContent = ans1.classList.contains('active') ? "-" : "+";
  }
}

createFaq();

CSS 部分

.faq {
  width: 100%;
  background-color: #4caf50;
  border-radius: 8px;
  margin: 0 0 1.4em;
  padding: 0.7em 1.4em;
  position: relative;
}

.faq .show_btn {
  width: 24px;
  height: 24px;
  background-color: black;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  position: absolute;
  right: 1.4em;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 答案初始隐藏 */
.faq-answer {
  display: none;
  margin-top: 1em;
  color: #fff;
}

/* 显示答案的类 */
.faq-answer.active {
  display: block;
}

HTML 部分（无需修改，保持原结构）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Accordion</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="accordian_body">
      <h1>MY FAQ's</h1>
    </div>
    
    <script id="faq-js" src="faq.js"></script>
  </body>
</html>

关键修改点 #

• 提前创建答案元素：初始化时就创建好答案的<p>元素并设置为隐藏，避免每次点击重复创建。
• 使用classList.toggle()切换状态：通过添加/移除active类控制答案的显示与隐藏，逻辑简洁高效。
• 调整按钮位置：用绝对定位将按钮放到FAQ标题右侧，优化视觉布局。
• 切换按钮文本：点击时将"+"改为"-"，直观反馈当前展开/收起状态。

内容的提问来源于stack exchange，提问作者shaquib khan