image - 带有嵌套折叠面板的动态加载的 Bootstrap 折叠面板上的图像切换问题
问题描述
有人可以使用嵌套的动态加载折叠面板来帮助动态加载折叠面板吗?我遇到的问题是外部和内部面板的图像切换。折叠部分工作正常,图像切换是我遇到的问题。这是与我所拥有的类似的东西。请原谅任何语法错误,我不得不编一个与我的类似的例子。
<div class="container">
@foreach(AccountModel aModel in Model.AccountModels)
{
<div class="panel panel-default">
<div class="panel-heading" data-target="#@aModel.Id" data-toggle="collapse" role="button">
<h4 class="panel-title">
<a>
<span class="glyphicon glyphicon-plus"></span>
@aModel.Description
</a>
</h4>
</div>
<div class="panel-collapse collapse" id="@aModel.Id">
<div class="panel-body">
@foreach(TransactionModel tModel in aModel.Transactions)
{
//nested collapse panel
<div class="panel panel-default">
<div class="panel-heading" data-target="#@tModel.Id" data-toggle="collapse" role="button">
<h4 class="panel-title">
<a>
<span class="glyphicon glyphicon-plus"></span>
@tModel.Description
</a>
</h4>
</div>
</div>
<div class=panel-collapse collapse" id="@tModel.Id">
<div class="panel-body">
<p>Some details</p>
<p>More details</p>
<div>
<div>
}
</div>
</div>
</div>
}
</div>
<script>
$('.collapse').on('show.bs.collapse', function() {
$(this).parent().find(".glyphicon-plus:first").removeClass("glyphicon-plus").addClass("glyphicon-minus");
stopPropagation();
}).on('hide.bs.collapse', function() {
$(this).parent().find(".glyphicon-minus:first").removeClass("glyphicon-minus").addClass("glyphicon-plus");
stopPropagation();
});
</script>
解决方案
推荐阅读
- javascript - 如何只在 if 语句中附加一个项目?
- r - 根据位于 R 中另一个 df 中的值的组合在 df 中创建一个变量
- c++ - C++ 中的“状态”是什么意思?
- c# - 如何将字符串与空格一起拆分?
- css - 将鼠标悬停在菜单项上时如何下划线?
- python - 使用 PyQt5 QStackWidget 构建复杂的 GUI
- mysql - 有没有办法查看 PHPMyAdmin 在数据库上运行的导出查询?
- function - Google 表格从 GUI 中选择日期和时间
- java - PgAdmin - PostgreSQL 无法正确显示长文本
- javascript - 在控制台中而不是在浏览器中反应状态对象更新?