如何使用 HTML 和 JS 制作手风琴

Question

我希望当用户单击大于号时，手风琴会下拉。

    <div class="row">
                    <div class="col-2">
                        <p>DEP-08B827E791<button class="accordion"><i class="fa-solid fa-greater-than fa ps-1"></i></button></p>
                    </div>
                    <div class="col-3">
                        <P>Omodeko Divine</P>
                    </div>
                    <div class="col-2">
                        <p>EE</p>
                    </div>
                    <div class="col-3">
                        <p>[ETHIOPE EAST]</p>
                        <P>DELSU HEALTH CENTER ABRAKA</P>
                    </div>
                    <div class="col-2">
                        <button class="btn btn-primary">GENERATE ID</button>
                    </div>
                    <div class="panel" onclick="document.getElementByclassname(panel).style.display='none'">
                      <p>No, but there must be adequate evidence that would help to support your claim.</p>
                    </div>
                </div>

这是 javascript

    var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("activee");

/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
  panel.style.display = "none";
} else {
  panel.style.display = "block";
}});}

单击大于号时，.panel 应该出现下拉菜单。

Answer 1

1. 添加onclick事件到大于图标
2. 下一步添加id到.panel div
3. 下一步在脚本中编写隐藏和显示的逻辑，请参考下面的代码片段

function showDropDown(){
  const targetDiv = document.getElementById("panelDivId");
  if (targetDiv.style.display !== "none") {
    targetDiv.style.display = "none";
  } else {
    targetDiv.style.display = "block";
  }
}

<div class="row">
                    <div class="col-2">
                        <p>DEP-08B827E791<button class="accordion"><i class="fa-solid fa-greater-than fa ps-1" onclick="showDropDown()">greaterThanIcon</i></button></p>
                    </div>
                    <div class="col-3">
                        <P>Omodeko Divine</P>
                    </div>
                    <div class="col-2">
                        <p>EE</p>
                    </div>
                    <div class="col-3">
                        <p>[ETHIOPE EAST]</p>
                        <P>DELSU HEALTH CENTER ABRAKA</P>
                    </div>
                    <div class="col-2">
                        <button class="btn btn-primary">GENERATE ID</button>
                    </div>
                    <div class="panel" id="panelDivId" onclick="document.getElementByclassname(panel).style.display='none'">
                      <p>No, but there must be adequate evidence that would help to support your claim.</p>
                    </div>
                </div>