Html: просмотр идентификатора вне его родительского идентификатора

#html #loops #bootstrap-4 #collapse

#HTML #циклы #bootstrap-4

Вопрос:

У меня этот коллапс в моем веб-приложении :

 <div id="accordionExample" >
                    @foreach ($mysection as $section)
                        <?php $sec_name='home.sec'.$section->section_name ;
                        $collaps_count  ;
                        $nf = new NumberFormatter("en", NumberFormatter::SPELLOUT);
                        $numbers_name=$nf->format($collaps_count);
                        $numbers_name=ucfirst($numbers_name);
                        $collapse_id='collapse'.$numbers_name;
                        $heading='heading'.$numbers_name;?>
                            <div class="card">
                                <div class="ard-header py-0 px-0" id="$heading" style="border: none">
                                    <button class=" btn w-100 text-right bg-light " type="button" data-toggle="collapse" data-target="#{{$collapse_id}}" aria-expanded="true" aria-controls="{{$collapse_id}}" >
                                        <h5 class="">{{__($sec_name)}}</div></h5>
                                    </button>
                                </div>
                                <div style="height:5px"></div>
                                <div id="{{$collapse_id}}" class="collapse <?php if($collaps_count == 1) echo 'show'?>"  aria-labelledby="{{$heading}}" data-parent="#accordionExample">
                                    @foreach ($course->Lession as $lession)
                                    @if ($section->section_name == $lession->section_name)
                                    
                                        <div class=" card-body flex-row d-flex justify-content-between">
                                            <div>- {{$lession->$less_lang}}</div>
                                                @if ($lession->id==$order->lession_id)
                                                    <div class="text-left ml-2"><i class="material-icons" style="color:green">visibility</i></div>
                                                @else
                                                    <div class="text-left ml-2"><i class="material-icons" style="color:grey">visibility</i></div>
                                                @endif
                                        </div>
                                    
                                    @endif    
                                    @endforeach
                                </div>
                            </div>
                            
                    @endforeach;
                </div>
                <!-- End of Lessionss Card -->
            </div>

Проблема заключается в том, что при циклическом свертывании:
первая строка начинается внутри (accordionExample) id правильно.
вторая строка начинается снаружи (пример accordionExample) id.
эта строка начинается с родительского идентификатора (accordionExample), как показано на изображении :

Ответ №1:

В вашей разметке 2 ошибки:

Закрытие div внутри тега кнопки:

<h5 class="">{{__($sec_name)}}</div></h5>

Заменить на

<h5 class="">{{__($sec_name)}}</h5> или <h5 class=""><div>{{__($sec_name)}}</div></h5>

Дополнительный div в конце.

1. Я использую редактор vscode. Когда вы выбираете один элемент, он выделяет его и закрывающую пару. Проходя через DOM, я мог легко обнаружить элементы с неправильной совпадающей близкой парой.

Ответ №2:

ваш цикл foreach начинается после #accordionExample , но в конце есть 2 закрывающих тега div.

 @endforeach;
                </div>
                <!-- End of Lessionss Card -->
            </div>

это должно быть изменено на

 
                </div>
@endforeach;
                <!-- End of Lessionss Card -->
            </div>
``