HTML：查看其父ID之外的ID

编程问答 2022-06-09

问题描述

我的网络应用程序出现此崩溃：

<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）id的父级开头，如图所示：

enter image description here

解决方法

您的标记中有2个错误：

  1. 在按钮标签中关闭div：

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

替换为

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

  1. 最后加上div。
,

您的foreach循环在#accordionExample之后开始，但最后有两个div结束标记。

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

这应该更改为


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