web-dev-qa-db-ja.com

nullのプロパティ 'querySelectorAll'を読み取れませんbootstrap collapse

bootstrapのphpコードを記述しており、エラーが発生してnullのプロパティ 'querySelectorAll'を読み取ることができません。この単純な問題に本当に多くの時間を費やしています。実際に機能しているphpなしで置くと、エラーのないエラーエラーは次のとおりです。

Uncaught TypeError: Cannot read property 'querySelectorAll' of null
at a.t._getParent (collapse.js:300)
at new a (collapse.js:88)
at HTMLDivElement.<anonymous> (collapse.js:345)
at Function.each (jquery.js:368)
at jQuery.fn.init.each (jquery.js:157)
at jQuery.fn.init.a._jQueryInterface [as collapse] (collapse.js:331)
at HTMLDivElement.<anonymous> (collapse.js:378)
at Function.each (jquery.js:368)
at jQuery.fn.init.each (jquery.js:157)
at HTMLButtonElement.<anonymous> (collapse.js:374)

それは私のphpコードです

<div id="info-content" class="accordion" id="accordionExample">
                  <?
                    $faqs = get_field('faqs');
                    foreach ($faqs as $key => $value):
                  ?>
                  <div class="card">
                    <div class="card-header" id="headingOne<?=$key;?>">
                      <h5 class="mb-0">
                        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne<?=$key;?>" aria-expanded="true" aria-controls="collapseOne<?=$key;?>">
                          <?=$value['question'];?>
                        </button>
                      </h5>
                      <i class="fas fa-plus"></i>
                    </div>
                    <div id="collapseOne<?=$key;?>" class="collapse <?if($key==0):?>show<?endif;?>" aria-labelledby="headingOne<?=$key;?>" data-parent="#accordionExample">
                      <div class="card-body">
                        <?=$value['answer'];?>
                      </div>
                    </div>
                  </div>
                  <?endforeach;?>
                </div>
javascriptphpjquerytwitter-bootstrap
10
Ravshan Abdurasulov

アコーディオンの親要素のidに余分なスペースがあると、この問題が発生しました。問題を解決するために余分なスペースを削除する必要がありました。

以下のスニペットは、親divを変更した場合にこの例外をスローします

  • から：<div id="accordionExample">
  • へ：<div id="accordionExample ">

例snippet：

  <div id="accordionExample">
    <div class="card">
      <div class="card-header">
        <a class="card-link" data-toggle="collapse" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </div>
      <div id="collapseOne" class="collapse show" data-parent="#accordionExample">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
  </div>
0
Akber Iqbal