时间戳

首页 > 解决方案 > 如何在纯js中实现手风琴不起作用

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

问题描述

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

标签： javascripthtmlcssaccordion

解决方案

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

推荐阅读