折叠效果
程序员文章站
2022-05-15 16:56:43
...
代码段：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入 Bootstrap -->
<script src="js/jquery/3.3.1/jquery.min.js"></script>
<link href="css/bootstrap/3.3.7/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.7/bootstrap.min.js"></script>
<script src="js/holder.min.js"></script>
</head>
<body>
<div class="container">
<h3 class="page-header">折叠效果</h3>
<!--用原生js显示折叠效果开始-->
<div class="panel-group"><!--.panel-group能使下面几个面板之间的距离更加紧促-->
<div class="panel panel-primary">
<!--.panel-default|info|success|warning|danger|primary-->
<div class="panel-heading">
<h3 class="panel-title">这是第一个面板</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-primary">
<!--.panel-default|info|success|warning|danger|primary-->
<div class="panel-heading">
<h3 class="panel-title">这是第二个面板</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-primary">
<!--.panel-default|info|success|warning|danger|primary-->
<div class="panel-heading">
<h3 class="panel-title">这是第三个面板</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<!--用原生js显示折叠效果结束-->
</div>
</body>
<script>
/*用原生js显示折叠效果开始*/
$('panel-body').hide().first().show();
$('.panel-title').click(function(){
$(this).parent().next().slideDown();
$('.panel-body').not($(this).parent().next()).slideUp();
})
/*用原生js显示折叠效果结束*/
</script>
</html>实现效果：
上一篇： vue 实现DES加密/解密、生成秘钥