基于BootStrap的Collapse折叠(包含回显展开折叠的对应状态)

情况描述:为了改善页面上的input框太多,采用∧∨折叠展开,这个小东西来控制,第一次做,记录一下ヾ(◍°∇°◍)ノ゙下边是Code

代码:

复制代码
//html代码
<div id="collapseTwo" class="panel-collapse collapse"> //想要被折叠起来的代码 //就使劲往这里放 //就对了 </div>
<div class="col-md-1" style="float: right; margin-top: 2px">
<div data-toggle="collapse" data-parent="#accordion" onclick="clickCollapse()"
href="#collapseTwo">
<div id="open">
<img th:src="@{/assets-new/apps/img/zhankai.png}" title="展开"/><a>展开</a>
</div>
<div id="close" hidden="hidden">
<img th:src="@{/assets-new/apps/img/shouqi.png}" title="关闭"/><a>收起</a>
</div>
</div>
</div>
//js代码
<script type="text/javascript">
 function clickCollapse() {
$('#open').toggle("fast");
$('#close').toggle("fast");
}
</script>
复制代码

 

复制代码
//js代码 根据折叠展开状态,页面回显与之对应的状态(发送异步请求时候)
$("#search").click("click", function () {
var state = $('#collapseTwo').hasClass('in');
var url = rootPath + "vrx/vouxxXxx/list";
if (state == true) {
url += "?panelState=open"
} else {
url += "?panelState=close"
}
$("#searchForm").ajaxSubmit({
url: url,
async: true,
success: function (data) {
var tb = $("#loadhtml");
var topliHtml = $("#topli").html();
tb.html(CommnUtil.loadingImg());
tb.html(data);
$("#topli").html(topliHtml);
}
});
});
//后台java
String state = this.getRequest().getParameter("panelState");
map.addAttribute("state",state);
return VIEW_PATH + "/list";
//list.html页面里的js
<script type="text/javascript" th:inline="javascript" xmlns:th="http://www.w3.org/1999/xhtml">
var state = [[${state}]];
if (CommnUtil.notNull(state)) {
if (state == "open") {
$('#collapseTwo').collapse('show');
$('#open').toggle("fast");
$('#close').toggle("fast");
}
}
</script>
 
复制代码

 

说明:就这么多代码,说实话,关于引入的js什么的我还是不太会找正确的好用的链接Σ(☉▽☉"a丧!

posted @   ジ绯色月下ぎ  阅读(4773)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
点击右上角即可分享
微信分享提示