javascript - 如何在下方弹出手风琴常见问题解答？

问题描述

我一直在为我正在构建的网站制作手风琴式的常见问题解答。我导入了 JavaScript 代码并将其链接到主 HTML 文件，以便在单击时弹出下面的常见问题解答。不幸的是，无论我是直接将脚本放在 HTML 文件中还是在外部链接脚本文件，它都无法正常工作。有人可以让我知道哪里出错了吗？非常感谢！

  <!DOCTYPE html>
  <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    <link rel="icon" href="https://drive.google.com/uc?id=15DKhs1-y_c6C5TXfbQ1es1cJYwItjKkQ" sizes="32x32" type="image/png">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
    </script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">. 
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> 
    <script src="app.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
 </head>
 <body>

<div id="faq">
  <div class="faq-title">FAQ</div>

  <button class="accordion">Question 1</button>
  <div class="panel">
    <p>Answer 1</p>
  </div>

  <button class="accordion">Question 2</button>
  <div class="panel">
    <p>Answer 2</p>
  </div>
  
  <button class="accordion">Question 3</button>
  <div class="panel">
    <p>Answer 3</p>
  </div>

 </body>
</html>

下面是我使用的 CSS。

/* FAQ */

.faq-title {
  text-align: left;
  font-family: 'Poppins', sans-serif;
  font-size: 40px;
  margin-left: 6vw;
  margin-top: 10vh;
  margin-bottom: 7vh;
  font-weight: bold;
  color: black;
}

.accordion {
  background-color: #ffe3c9;
  font-family: 'Poppins', sans-serif;
  color: #444;
  font-size: 20px;
  cursor: pointer;
  padding: 25px;
  margin-left: 5vw;
  margin-right: 5vw;
  margin-bottom: 1vh;
  width: 90%;
  text-align: left;
  border: none;
  border-radius: 10px;
  outline: none;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #FF8718;
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.accordion:after {
  padding-top: 0.5vh;
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #FF8718;
  float: right;
  margin-left: 5px;
}

.active:after {
  padding-top: 1vh;
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

现在出现在 script.js 文件中的 JS：

/* FAQ ACCORDION STYLE */
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

标签： javascripthtmlcssaccordion

javascript - 如何在下方弹出手风琴常见问题解答？

问题描述

解决方案

推荐阅读