Question

我想知道如何在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
    }

Answer 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>

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

1 个答案: