Jquery+Bootstrap实现Collapse菜单源码（手风琴折叠效果）-511遇见

采用Bootstrap的折叠（Collapse）插件可以很容易地让页面区域折叠起来，可以轻松用它来创建折叠导航和内容面板，它都允许很多内容选项。今天我们采用Jquery实现的手风琴垂直菜单，它基于jQuery和Boostrap，外观简单而美观，比起原生态的Bootstrap的Collapse菜单更加美观，更加个性，更加易于拓展，小编特意推荐给你，下面是效果预览图：

引入Bootstrap相关文件

<link rel="stylesheet" href="bootstrap.min.css">

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>

<script src="js/bootstrap.min.js"></script>

Bootstrap原生态Collapse效果（点击查看）

Collapsible Group Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Collapsible Group Item #2

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Collapsible Group Item #3

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

源码：

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

```
  <div class="panel panel-default">
```

    <div class="panel-heading" role="tab" id="headingOne">

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

        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">

```
          Collapsible Group Item #1
```
```
        </a>
```
```
      </h4>
```
```
    </div>
```

    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

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

        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

```
      </div>
```
```
    </div>
```
```
  </div>
```
```
  <div class="panel panel-default">
```

    <div class="panel-heading" role="tab" id="headingTwo">

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

        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">

```
          Collapsible Group Item #2
```
```
        </a>
```
```
      </h4>
```
```
    </div>
```

    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">

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

        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

```
      </div>
```
```
    </div>
```
```
  </div>
```
```
  <div class="panel panel-default">
```

    <div class="panel-heading" role="tab" id="headingThree">

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

        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">

```
          Collapsible Group Item #3
```
```
        </a>
```
```
      </h4>
```
```
    </div>
```

    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">

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

        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

```
      </div>
```
```
    </div>
```
```
  </div>
```
```
</div>
```

加入新的CSS代码渲染效果如上图

```
#accordion .panel-title a{
```
```
		display: block;
```
```
		font-size: 16px;
```
```
		font-weight: bold;
```
```
		color: #f7c59f;
```
```
		padding: 15px 48px 15px 20px;
```
```
		background: #e16b47;
```
```
		position: relative;
```
```
		transition: all 0.3s ease 0s;
```
```
	}
```
```
	#accordion .panel-title a.collapsed{
```
```
		color: #e16b47;
```
```
		background: #f7c59f;
```
```
		border-bottom: 1px solid #3d3537;
```
```
	}
```
```
	#accordion .panel-title a:after,
```

	#accordion .panel-title a.collapsed:after{

```
		content: "";
```
```
		display: block;
```
```
		width: 3px;
```
```
		height: 100%;
```
```
		position: absolute;
```
```
		top: 0;
```
```
		right: 30px;
```
```
		background: #f7c59f;
```
```
	}
```

	#accordion .panel-title a.collapsed:after{

```
		background: #e16b47;
```
```
	}
```
```
	#accordion .panel-title a:before,
```

	#accordion .panel-title a.collapsed:before{

```
		content: "\f068";
```
```
		font-family: FontAwesome;
```
```
		width: 25px;
```
```
		height: 25px;
```
```
		line-height: 25px;
```
```
		border-radius: 50%;
```
```
		background: #f7c59f;
```
```
		position: absolute;
```
```
		top: 12px;
```
```
		right: 19px;
```
```
		font-size: 14px;
```
```
		color: #e16b47;
```
```
		text-align: center;
```
```
		z-index: 1;
```
```
	}
```

	#accordion .panel-title a.collapsed:before{

```
		content: "\f067";
```
```
		color: #f7c59f;
```
```
		background: #e16b47;
```
```
	}
```
```
	#accordion .panel-body{
```
```
		background: #e16b47;
```
```
		color: #f7c59f;
```
```
		padding: 20px 50px 15px 20px;
```
```
		line-height: 25px;
```
```
		border: none;
```
```
		position: relative;
```
```
	}
```
```
	#accordion .panel-body:after{
```
```
		content: "";
```
```
		display: block;
```
```
		width: 3px;
```
```
		height: 100%;
```
```
		background: #f7c59f;
```
```
		position: absolute;
```
```
		top: 0;
```
```
		right: 30px;
```
```
	}
```

源码下载和在线预览

在线预览地址：http://www.html5tricks.com/demo/jquery-bootstrap-accordion-menu/index.html
百度云盘下载：http://pan.baidu.com/s/1i4AKq4P

分享到：

用微信扫一扫，分享给朋友

引入Bootstrap相关文件

Bootstrap原生态Collapse效果（点击查看）

Collapsible Group Item #1

Collapsible Group Item #2

Collapsible Group Item #3

加入新的CSS代码渲染效果如上图

源码下载和在线预览

您可能感兴趣的文章: