首页 > 解决方案 > 带有嵌套折叠面板的动态加载的 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>

标签: imagetwitter-bootstrap-3nestedpanelcollapse

解决方案


推荐阅读