Bootstrap3扁平风格垂直手风琴特效

PetitQ 手风琴 2018-10-30 1.56K 0 0

这是一款基于 Bootstrap3 的炫酷扁平风格垂直手风琴特效。该手风琴特效使用扁平风格，手风琴项在切换时带平滑动画过渡效果，并且还带有 2 种不同的图标动画效果。

使用方法：

使用该手风琴特效需要在页面中引入 bootstrap v3 版本的相关文件和 jquery 文件。另外，手风琴的图标使用了谷歌的 Material+Icons 字体，使用是也要将其引入。

也想出现在这里？联系我们吧

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>

<script src='js/jauqery.min.js'></script>

<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>

HTML 结构：

该垂直手风琴使用 bootstrap 的网格系统来控制大小，HTML 结构采用 Bootstrap Accordion 的 HTML 结构。

```
<div class="container">
```
```
  <div class="col-md-6 col-sm-6">
```

    <h3>Default collapse with scaling icon</h3>

    <div class="panel-group wrap" id="bs-collapse">

```
 
```
```
      <div class="panel">
```
```
        <div class="panel-heading">
```
```
          <h4 class="panel-title">
```

        <a data-toggle="collapse" data-parent="#" href="#one">

```
          Collapse item #1
```
```
        </a>
```
```
      </h4>
```
```
        </div>
```

        <div id="one" class="panel-collapse collapse">

```
          <div class="panel-body">
```
```
           ......
```
```
          </div>
```
```
        </div>
```
```
 
```
```
      </div>
```
```
      
```
```
 
```
```
      ......
```
```
 
```
```
    </div>
```
```
    
```
```
  </div>
```
```
</div>
```

CSS 样式：

在 CSS 样式中，只是简单的设置了一些基本样式。并为每个手风琴项的头部设置动画过渡效果。另外还设置了 2 中图标在激活状态时的动画效果。

```
/* #bs-collapse icon scale option */
```
```
 
```
```
.panel-heading a:before {
```
```
  content: '\e146';
```
```
  position: absolute;
```
```
  font-family: 'Material Icons';
```
```
  right: 5px;
```
```
  top: 10px;
```
```
  font-size: 24px;
```
```
  -webkit-transition: all 0.5s;
```
```
  transition: all 0.5s;
```
```
  -webkit-transform: scale(1);
```
```
          transform: scale(1);
```
```
}
```
```
 
```
```
.panel-heading.active a:before {
```
```
  content: ' ';
```
```
  -webkit-transition: all 0.5s;
```
```
  transition: all 0.5s;
```
```
  -webkit-transform: scale(0);
```
```
          transform: scale(0);
```
```
}
```
```
 
```
```
#bs-collapse .panel-heading a:after {
```
```
  content: ' ';
```
```
  font-size: 24px;
```
```
  position: absolute;
```
```
  font-family: 'Material Icons';
```
```
  right: 5px;
```
```
  top: 10px;
```
```
  -webkit-transform: scale(0);
```
```
          transform: scale(0);
```
```
  -webkit-transition: all 0.5s;
```
```
  transition: all 0.5s;
```
```
}
```
```
 
```

#bs-collapse .panel-heading.active a:after {

```
  content: '\e909';
```
```
  -webkit-transform: scale(1);
```
```
          transform: scale(1);
```
```
  -webkit-transition: all 0.5s;
```
```
  transition: all 0.5s;
```
```
}
```
```
/* #accordion rotate icon option */
```
```
 
```
```
#accordion .panel-heading a:before {
```
```
  content: '\e316';
```
```
  font-size: 24px;
```
```
  position: absolute;
```
```
  font-family: 'Material Icons';
```
```
  right: 5px;
```
```
  top: 10px;
```
```
  -webkit-transform: rotate(180deg);
```
```
          transform: rotate(180deg);
```
```
  -webkit-transition: all 0.5s;
```
```
  transition: all 0.5s;
```
```
}
```
```
 
```

#accordion .panel-heading.active a:before {

```
  -webkit-transform: rotate(0deg);
```
```
          transform: rotate(0deg);
```
```
  -webkit-transition: all 0.5s;
```
```
  transition: all 0.5s;
```
```
}
```

JavaScript 代码：

该手风琴特效使用 jQuery 代码来为相应的手风琴项在展开和收缩时添加和删除相应的 class 类。

```
$(document).ready(function() {
```

  $('.collapse.in').prev('.panel-heading').addClass('active');

```
  $('#accordion, #bs-collapse')
```

    .on('show.bs.collapse', function(a) {

      $(a.target).prev('.panel-heading').addClass('active');

```
    })
```

    .on('hide.bs.collapse', function(a) {

      $(a.target).prev('.panel-heading').removeClass('active');

```
    });
```
```
});
```

Bootstrap3 扁平风格垂直手风琴特效

已有 390 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

手风琴

Bootstrap3扁平风格垂直手风琴特效

使用方法：

HTML 结构：

CSS 样式：

JavaScript 代码：

Bootstrap3 扁平风格垂直手风琴特效

相关文章

js和CSS3漂亮的手风琴菜单特效

paper-collapse - 卡片式手风琴特效

手风琴鼠标滑过图片标题水平滑动切换

发表回复取消回复

热销模板

手风琴

使用方法：

HTML 结构：

CSS 样式：

JavaScript 代码：

Bootstrap3 扁平风格垂直手风琴特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复