Question

我对编码世界是陌生的，并且一直通过互联网搜索和实验来教自己。但是，我已经将头撞了一段时间，没有解决办法。我为一家小规模的非营利组织工作，并朝着十几个方向发展，所以我希望这个伟大社区中的某人可以提供帮助。

我已经设置了此手风琴并将其用于我们网站上的其他页面，但是现在我希望能够做到这一点，因此一次只能打开一个选项卡。我知道代码不是很好，但这是我所做的工作，并且可以在我们的wordpress网站上找到具有主题的作品（他们在主题中构建的手风琴不是很好）。

任何帮助将不胜感激。谢谢！

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion-2 {
    background-color: #e38854 ;
    font-family: lato;
    font-wtight: bold;
    color: white;
    cursor: pointer;
    padding: 15px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 18px;
    line-height: 20px;
    transition: 0.4s;
    margin-top: 0px;

}


.accordion-2:after {
    content: '+';
    color: white;
    font-weight: bold;
    font-size; 16px;
    float: right;
    margin-left: 3px;
    margin-right: 15px;


}

.active, .accordion-2:hover {
    background-color: #c88862;

}

.active, .accordion-2:hover {
font-color: white;

}

.active:after {
    content: "-";
    color: white;
    font-weight: bold;
    font-size: 18px;
    float: right;
    margin-left: 3px;
    margin-right: 15px;
}

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


</style>
</head>
<body>

<button class="accordion-2">Heading 1</button>
<div class="panel">
  <p style="text-align: left;"><span style="font-size: 16px; line-height: 1.5;">
  Text 1<p></span></p>
</div>

<button class="accordion-2">Heading 2</button>
<div class="panel">
  <p style="text-align: left;"><span style="font-size: 16px; line-height: 1.5;">
  Text 2<p></span></p>
</div>

<button class="accordion-2">Heading 3</button>
<div class="panel">
  <p style="text-align: left;"><span style="font-size: 16px; line-height: 1.5;">
  Text 3<p></span></p>
</div>

<button class="accordion-2">Heading 4</button>
<div class="panel">
  <p style="text-align: left;"><span style="font-size: 16px; line-height: 1.5;">
  Text 4<p></span></p>
</div>

<button class="accordion-2">Heading 5</button>
<div class="panel">
  <p style="text-align: left;"><span style="font-size: 16px; line-height: 1.5;">
  Text 5<p></span></p>
</div>

<script>
var acc = document.getElementsByClassName("accordion-2");
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";

    } 
  });
}



</script>

</body>
</html>

手风琴崩溃

0 个答案: