Question

我正在编写引导程序崩溃的PHP代码，并报错无法读取null的属性'querySelectorAll'。我花了很多时间解决这个简单的问题。如果我没有php就可以正常工作而不会出错错误是：

APIs

那是我的php代码

CORS

Answer 1

这是因为Bootstrap 4.1.1或2更改为4.1.3。

当您使用data-parent="selector"或data-parent="#selectorId"时，会发生相同的错误。

此错误过去通常是无声的，但现在显示此控制台错误。

Answer 2

在手风琴父元素的id中有多余的空间时，我遇到了这个问题。不得不删除多余的空间来解决问题；

如果我们更改父级div，则以下代码段将引发此异常

来自：<div id="accordionExample">
收件人：<div id="accordionExample ">

示例代码段：

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

Answer 3

我也有同样的问题。对我而言，这是由于主导航容器中缺少id。请参见下面的id和ul

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

希望这对某人有帮助。

干杯。

Answer 4

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

那就是我的窍门。

Answer 5

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

您可以在这里进行操作：https://cdnjs.com/libraries/popper.js/2.5.3

Answer 6

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

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

无法读取null引导程序崩溃的属性'querySelectorAll'

7 个答案: