无法读取空引导崩溃的属性“querySelectorAll”答案

【问题标题】：Cannot read property 'querySelectorAll' of null bootstrap collapse无法读取空引导崩溃的属性“querySelectorAll”
【发布时间】：2019-02-23 22:48:39
【问题描述】：

我正在编写引导崩溃的 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>

【问题讨论】：

很可能您为 data-parent、data-target 或任何其他使用选择器值的属性提供了错误的 css 选择器。如果这些值不正确，将它们与querySelectorAll 一起使用可能会导致返回值为空，并且如果库没有进行适当的检查，则会导致错误。确保它们是正确的
我查了但是没找到

标签： javascript php jquery twitter-bootstrap

【解决方案1】：

这是由于 Bootstrap 4.1.1 或 2 更改为 4.1.3。

当您使用 data-parent="selector" 时会发生同样的错误，而它应该是 data-parent="#selectorId" 或 data-parent=".selectorClassName"。

这个错误过去会静默无效，但现在它会显示这个控制台错误。

【讨论】：

从 Bootstrap v4.0 迁移到 v4.3 时，我遇到了类似的问题。显然，v4 中的 collapsables 不需要 data-parent，但在 v4.3 中它们需要。
删除 data-parent="#accordion 为我修复了它。

【解决方案2】：

我也有同样的问题。对我来说，这是由于主导航栏容器中缺少id。请参阅下面的idul，

<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
   <!-- Nav Item - Dashboard -->
   <li class="nav-item">
    <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities" aria-expanded="true" aria-controls="collapseUtilities">
      <i class="fas fa-fw fa-wrench"></i>
      <span>Utilities</span>
    </a>
    <div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities" data-parent="#accordionSidebar">
      <div class="bg-white py-2 collapse-inner rounded">
        <h6 class="collapse-header">Custom Utilities:</h6>
        <a class="collapse-item" href="utilities-color.html">Colors</a>
        <a class="collapse-item" href="utilities-border.html">Borders</a>
        <a class="collapse-item" href="utilities-animation.html">Animations</a>
        <a class="collapse-item" href="utilities-other.html">Other</a>
      </div>
    </div>
 </li>     
</ul>

希望这对某人有所帮助。

干杯。

【讨论】：

【解决方案3】：

这个问题发生在我使用 bootstrap 4.1.3 时，我之前没有注意到。

对我来说，问题在于折叠元素的 data-parent 属性持有对不存在元素的引用。

一旦我将其更改为有效元素，问题就消失了。

【讨论】：

【解决方案4】：

如果您要单独自定义包含引导 javascript 插件，请确保在 collapse.js 之前包含 util.js。

这就是我的诀窍。

【讨论】：

【解决方案5】：

对我来说，解决方案是更新 popper.js！

您可以从这里开始：https://cdnjs.com/libraries/popper.js/2.5.3

【讨论】：

【解决方案6】：

除了collapse.js，还需要加载bootsrap util.js

【讨论】：

【解决方案7】：

问题是因为您的 ul id="accordionSidebar" 与您的 a data-parent="#accordionExample" 相同。

试试：

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

【讨论】：