bootstrap-collapse展开收起插件

最新推荐文章于 2024-03-26 01:45:20 发布

原创最新推荐文章于 2024-03-26 01:45:20 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

本文介绍了如何在JSP页面中利用Bootstrap的Collapse插件，实现内容的展开与收起效果。首先，需要引入Bootstrap的相关依赖，然后通过简单的HTML和JavaScript代码，创建可折叠的面板，实现点击按钮控制内容的显示与隐藏，提升网页交互体验。

添加依赖

<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

jsp页面

<body>
    <div>
    	<div class="panel-group" id="accordion">
		  <div class="panel panel-default">
		    <div class="panel-heading">
		      <h4 class="panel-title">
		        <a data-toggle="collapse" data-parent="#accordion" 
		          href="#collapseOne">
		          	点我展开/收起
		        </a>
		      </h4>
		    </div>
	    <div id="collapseOne" class="panel-collapse collapse in">
	      <div class="panel-body">
	      	我是展开/收起内容
	        <c:forEach items="${particDefaltList}" var="p">
    				<li>${p.particName}</li>
	   		</c:forEach>
	      </div>
	    </div>
	  </div>
    </div>
  </body>