Проблема с переключением изображения на динамически загруженной панели свертывания Bootstrap с вложенной панелью свертывания - PullRequest
Новая
       26

Проблема с переключением изображения на динамически загруженной панели свертывания Bootstrap с вложенной панелью свертывания

0 голосов
/ 18 января 2019

Может ли кто-нибудь помочь с динамически загружаемой панелью свертывания с вложенной динамически загружаемой панелью свертывания? У меня проблема с переключением изображений для внешней и внутренней панелей. Часть свёртки работает нормально, у меня проблемы с переключением изображений. Вот что-то похожее на то, что у меня есть. Прошу прощения за любые синтаксические ошибки, мне пришлось составить пример, похожий на мой. 

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