如何在纯js中实现手风琴不起作用答案

【问题标题】：How to implement accordion in pure js not working如何在纯js中实现手风琴不起作用
【发布时间】：2019-05-10 07:58:27
【问题描述】：

我想知道如何在 javascript 中实现手风琴。

以下手风琴功能无法正常工作，将错误声明为 TypeError: Cannot read property 'classList' of null

我卡住了，请帮忙只需要在 javascript 中执行以下操作。我已经更新了html、css和javscript代码下面的代码。

<div class="wrapper">
<div class="card"  class="accordioncontent" id="accordioncontent_js">
  <p>Implement Accordion in Pure JS</p>
</div>
<div class="card-title">
 <h5 class="accordionheader" @click=${this.handleToggle('js')}>JS</h5>
</div>

<div class="card"  class="accordioncontent" id="accordioncontent_ph">
  <p>Implement Accordion in Pure JS</p>
</div>
<div class="card-title">
 <h5 class="accordionheader" @click=${this.handleToggle('ph')}>PH</h5>
</div>
</div>
js
  handleToggle(xid){
    var aC = this.shadowRoot.querySelectorAll("accordioncontent");
    var sc= this.shadowRoot.getElementById("accordioncontent_" + xid)
    var i;
       for(i = 0; i < aC.length; i++){
          var OaC = aC[i];
             if(aC[i] != sc){
                OaC.classList.remove("show_Content")
             }
       }
        sc.classList.toggle("show_Content");
 }
css
.show_Content{
    padding:20px 0;
    display:block;
    border:1px solid #a3a3a3;
    border-top:none;
    animation:slow-down .5s ease
    }

@keyframes slow-down{
    from{padding:0;opacity:0}
    to{padding:20px 0;opacity:1}
    }
.show_Content:before{
    content:"";
    width:8px;
    top:-7px;
    left:50%;
    display:block;
    position:absolute;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-bottom:8px solid #fff
    }

【问题讨论】：

这是在 Google 上弹出的第一个链接：Pure Javascript Accordion
@iuliu.net 感谢您的回复，是的，我已经看到了，我已经更新了卡住的代码。
您将值 PH 传递给您的点击处理函数，并将其附加到 accordioncontent_ 以通过 ID 查找元素……只是没有这样的元素。 accordioncontent_PH 和 accordioncontent_ph 是两个不同的东西。

标签： javascript html css accordion

【解决方案1】：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

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

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}
</style>
</head>
<body>

<h2>Accordion</h2>

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<script>
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.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>

</body>
</html>

【讨论】：