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

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



下面就是纯纯的干货环节

简单的css代码

/*手风琴*/<br />
.xm-sfq-body{<br />
background: #ececec;<br />
margin: .5rem 0;<br />
border-radius: 6px;<br />
}<br />
.xm-sfq {<br />
background-color: #16b576;<br />
cursor: pointer;<br />
padding: .5rem;<br />
width: calc(100% - 1rem);<br />
border: none;<br />
font-size: 14px;<br />
transition: 0.4s;<br />
border-radius: 6px;<br />
}<br />
<br />
.xm-sfq-title{<br />
margin-left: 1rem;<br />
color: #fff;<br />
}<br />
<br />
.xm-sfq.active,.xm-sfq:hover {<br />
background-color:red;<br />
}<br />
<br />
.panelcd {<br />
background-color: #bebebe;<br />
max-height: 0;<br />
overflow: hidden;<br />
transition: max-height 0.2s ease-out;<br />
padding: 0 1rem;<br />
line-height: 2.5;<br />
font-size: 13px;<br />
border-radius: 0 0 6px 6px;<br />
}<br />
.xm-sfq:after {<br />
content:'\002B';<br />
font-weight:bold;<br />
float:left;<br />
margin-left:5px;<br />
}<br />
.xm-sfq.active:after {<br />
content:"\2212";<br />
}<br />
<br />
```<br />
<br />
html代码<br />
<br />
```html<br />
<div class="xm-sfq-body" onclick="sfq(this);"><br />
<div class="xm-sfq active"><br />
<span class="xm-sfq-title">标题</span><br />
</div><br />
<div class="panelcd" style="max-height: 33px;"><p>这是内容</p></div><br />
</div><br />
<div class="xm-sfq-body" onclick="sfq(this);"><br />
<div class="xm-sfq active"><br />
<span class="xm-sfq-title">标题</span><br />
</div><br />
<div class="panelcd" style="max-height: 33px;"><p>这是内容</p></div><br />
</div><br />
<div class="xm-sfq-body" onclick="sfq(this);"><br />
<div class="xm-sfq"><br />
<span class="xm-sfq-title">标题</span><br />
</div><br />
<div class="panelcd" ><p>这是内容</p></div><br />
</div><br />
<div class="xm-sfq-body" onclick="sfq(this);"><br />
<div class="xm-sfq active"><br />
<span class="xm-sfq-title">标题</span><br />
</div><br />
<div class="panelcd" style="max-height: 33px;"><p>这是内容</p></div><br />
</div><br />
<div class="xm-sfq-body" onclick="sfq(this);"><br />
<div class="xm-sfq"><br />
<span class="xm-sfq-title">标题</span><br />
</div><br />
<div class="panelcd"><p>这是内容</p></div><br />
</div><br />
```<br />
<br />
javascript<br />
<br />
```javascript<br />
function sfq(element) {<br />
if (!element) return;<br />
<br />
var xmSfqElement = element.querySelector('.xm-sfq');<br />
<br />
if (xmSfqElement) {<br />
// 给 .xm-sfq 添加或删除 "ddd" 类<br />
xmSfqElement.classList.toggle('active');<br />
<br />
var panel = element.querySelector('.panelcd');<br />
<br />
if (panel.style.maxHeight) {<br />
panel.style.maxHeight = '';<br />
} else {<br />
panel.style.maxHeight = panel.scrollHeight + "px";<br />
}<br />
}<br />
}<br />