原生js简单实现手风琴效果

今天花费一点时间解决了一下主题中的tab切换存在两种状态的时候只生效一种问题，也修复了一下手风琴每次需要点击两次才能使用的问题。 今天就把本站使用的手风琴代码分享给大家，功能有限，只实现了展开和闭合，不支持点击另一个其他展开的全部闭合。

下面就是纯纯的干货环节

简单的css代码

/*手风琴*/
.xm-sfq-body{
background: #ececec;
margin: .5rem 0;
border-radius: 6px;
}
.xm-sfq {
background-color: #16b576;
cursor: pointer;
padding: .5rem;
width: calc(100% - 1rem);
border: none;
font-size: 14px;
transition: 0.4s;
border-radius: 6px;
}

.xm-sfq-title{
  margin-left: 1rem;
  color: #fff;
}

.xm-sfq.active,.xm-sfq:hover {
  background-color:red;
}

.panelcd {
background-color: #bebebe;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
padding: 0 1rem;
line-height: 2.5;
font-size: 13px;
border-radius: 0 0 6px 6px;
}
.xm-sfq:after {
  content:'\002B';
  font-weight:bold;
  float:left;
  margin-left:5px;
}
.xm-sfq.active:after {
  content:"\2212";
}

html代码

<div class="xm-sfq-body" onclick="sfq(this);">
          <div class="xm-sfq active">
               <span class="xm-sfq-title">标题</span>
          </div>
               <div class="panelcd" style="max-height: 33px;"><p>这是内容</p></div>
     </div>
     <div class="xm-sfq-body" onclick="sfq(this);">
          <div class="xm-sfq active">
               <span class="xm-sfq-title">标题</span>
          </div>
               <div class="panelcd" style="max-height: 33px;"><p>这是内容</p></div>
     </div>
     <div class="xm-sfq-body" onclick="sfq(this);">
          <div class="xm-sfq">
               <span class="xm-sfq-title">标题</span>
          </div>
               <div class="panelcd" ><p>这是内容</p></div>
     </div>
     <div class="xm-sfq-body" onclick="sfq(this);">
          <div class="xm-sfq active">
               <span class="xm-sfq-title">标题</span>
          </div>
               <div class="panelcd" style="max-height: 33px;"><p>这是内容</p></div>
     </div>
     <div class="xm-sfq-body" onclick="sfq(this);">
          <div class="xm-sfq">
               <span class="xm-sfq-title">标题</span>
          </div>
               <div class="panelcd"><p>这是内容</p></div>
     </div>

javascript

function sfq(element) {
          if (!element) return;

          var xmSfqElement = element.querySelector('.xm-sfq');

          if (xmSfqElement) {
          // 给 .xm-sfq 添加或删除 "ddd" 类
          xmSfqElement.classList.toggle('active');

          var panel = element.querySelector('.panelcd');

          if (panel.style.maxHeight) {
               panel.style.maxHeight = '';
          } else {
               panel.style.maxHeight = panel.scrollHeight + "px";
          }
          }
          }