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

原创

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

寻梦xunm| 182| 休闲

3个月前

超过103天温馨提示

本文最后更新于2024年10月06日，已超过103天没有更新，若内容或图片失效，请留言反馈。

今天花费一点时间解决了一下主题中的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

此处内容需要评论回复后方可阅读。

原创 css 教程源码 html js 代码

0 赞 or 打赏

喜欢就打赏一点