带嵌套折叠面板的动态加载的Bootstrap折叠面板上的图像切换问题

时间:2019-01-18 02:31:34

标签: image twitter-bootstrap-3 nested panel collapse

有人可以为带有嵌套动态加载折叠面板的动态加载折叠面板提供帮助吗?我遇到的问题是外面板和内面板的图像切换。收合部分工作正常,图像切换是我遇到的问题。这与我所拥有的相似。请原谅任何语法错误,我不得不编一个类似于我的示例。

<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>

0 个答案:

没有答案