如何制作FAQ手風琴切換？

我正在嘗試制作一個常見問題手風琴，我希望它具有兩個主要功能：1-一次可以看到一個問題和答案（我設法做到了）2-如果切換它關閉的未解決問題，并且反之亦然（這就是我正在努力解決的問題）

這是一支筆，上面有我在 codepen 上所做的一個小副本： https ://codepen.io/simokitkat/pen/yLEONpo?editors=0010

這是html：

<div class="text">
        <h1>FAQ</h1>
        <ul>
          <li>
            <div class="question">
              <h2>How many team members can I invite?</h2>
            </div>
            <p>You can invite up to 2 additional users on the Free plan. There is no limit on team members for the
              Premium
              plan.
            </p>
          </li>
          <li>
            <div class="question">
              <h2>What is the maximum file upload size?</h2>
            </div>
            <p>No more than 2GB. All files in your account must fit your allotted storage space.</p>
          </li>
          <li>
            <div class="question">
              <h2>How do I reset my password?</h2>
            </div>
            <p>Click “Forgot password” from the login page or “Change password” from your profile page. A
              reset link
              will be
              emailed to you.</p>
          </li>
          <li>
            <div class="question">
              <h2>Can I cancel my subscription?</h2>                          
            </div>
            <p>Yes! Send us a message and we’ll process your request no questions asked.</p>
          </li>
          <li>
            <div class="question">
              <h2>Do you provide additional support?</h2>
            </div>
            <p>Chat and email support is available 24/7. Phone lines are open during normal business hours.</p>
          </li>
        </ul>
      </div>

這是CSS

.text h1 {
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 20px;
}

ul {
    list-style: none;
}

ul>li {
    padding: 10px 10px 10px 0;
    border-bottom: 1px solid grey;
}

.question {
    margin-bottom: 10px;
}

ul li h2 {
    font-weight: 400;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.1s;
}

ul li img {
    transition: 0.3s;
}

ul li h2:hover {
    color: red;
    font-weight: 700;
}


li p {
    font-weight: 400;
    height: 0;
    overflow: hidden;
    transition: 0.3s;
}

.active p {
    height: 40px;
}

這就是JS代碼：

let allquestions = document.querySelectorAll("li");

allquestions.forEach(function (question) {
  question.addEventListener("click", function () {
    allquestions.forEach(function (element) {
      element.classList.remove("active");
    });
    this.classList.toggle("active");
  });
});

uj5u.com熱心網友回復：

您可以使用 htmldetails標簽

const details = document.querySelectorAll("details");

details.forEach((el) => {
  el.addEventListener("click", () => {
    details.forEach((detail) => {
      if (detail !== el) {
        detail.removeAttribute("open");
      }
    });
  });
});

<details>
  <summary>How many team members can I invite?</summary>
  <p>
    You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.
  </p>
</details>

<details>
  <summary>How many team members can I invite?</summary>
  <p>
    You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.
  </p>
</details>

標籤：javascripthtmlcss

上一篇：JavaScript和CSS中ID的目標子div

下一篇：如何洗掉此API注入表中的一行？