bootstrap3的panel（折叠窗口或手风琴效果）

最新推荐文章于 2023-12-14 17:34:46 发布

依然那么楞

最新推荐文章于 2023-12-14 17:34:46 发布

阅读量7.8k

点赞数 1

CC 4.0 BY-SA版权

文章标签： bootstrap3 panel 折叠手风琴窗口

本文链接：https://blog.youkuaiyun.com/ling811/article/details/16948179

本文详细介绍了Bootstrap3的Panel组件，包括如何实现折叠窗口和手风琴效果。内容涵盖2.3到3.0版本的变化，并提供了基本的代码示例，帮助读者理解和应用。

1、一些被修改的：

2.3版本的 3.0版本

`.accordion`	`.panel-group`
`.accordion-group`	`.panel .panel-default`
`.accordion-heading`	`.panel-heading`
`.accordion-body`	`.panel-collapse`
`.accordion-inner`	`.panel-body`

2、用法和2.3的基本相同：

3、基本代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="dist/css/bootstrap.css">
    <script type="text/javascript" src="dist/js/jquery.js"></script>
    <script type="text/javascript" src="dist/js/bootstrap.js"></script>
    <script type="text/javascript" src="bootstrap/js/collapse.js"></script>
<title>无标题文档</title>
</head>

<body style="margin:200px;">

<div class="panel-group"  id="accordion">
	<div class="panel panel-default">
    	<div class="panel-heading">
        	<div class="panel-title">
            	<a href="#panel1" class="panel-toggle" data-toggle="collapse" data-parent="#accordion">
                	卡1
                </a>
            </div>
        </div>
        <div id="panel1" class="panel-collapse collapse in">
        	<div class="panel-body">
            	卡1内容
            </div>
        </div>
    </div>
    <div class="panel panel-default">
    	<div class="panel-heading">
        	<div class="panel-title">
            	<a href="#panel2" class="panel-toggle" data-toggle="collapse" data-parent="#accordion">
                	卡2
                </a>
            </div>
        </div>
        <div id="panel2" class="panel-collapse collapse in">
        	<div class="panel-body">
            	卡2内容
            </div>
        </div>
    </div>
</div>

<script>

$('.collapse').collapse({
  toggle: true,parent:'#accordion'
})
$('.panel-heading').on('click', function () {
    var self = this;
    $(self).nextAll().eq(0).collapse("show");
})
</script>
</body>
</html>

4、效果图：