引导程序未按预期运行

Posted 2023-03-05

【中文标题】引导程序未按预期运行

【英文标题】：Bootstrap not functioning as expected

【发布时间】：2020-01-14 13:32:44

【问题描述】：

问题已解决：

问题与脚本调用js的路径有关。原脚本：

````<script src="js/app.js" charset="utf-8"></script>````

工作脚本：

````<script src="/js/app.js" charset="utf-8"></script>````

一开始缺少的 / 正在处理最初加载的页面，当您深入浏览它被抛出的站点时。

我正在使用带有卡片的引导手风琴向用户呈现数据。当页面第一次创建为静态页面时，手风琴起作用了。一旦我向它调用数据，手风琴就失去了功能，无法打开或折叠。他们停留在他们所在的位置。检查网页会显示所有存在的代码，但有些东西阻止了“折叠”功能。 aria-expanded 类也是如此。选择“true”/“false”对类功能没有影响。

我创建了一个新文件，在没有 DB 调用的情况下将代码复制并粘贴到其中，并验证它是否有效，因此问题似乎与 php 调用直接相关，第一个是： $department->name

另一个有趣的事情是，在删除（也尝试注释掉）数据库调用之后，页面仍然无法正常运行。但是，我没有进行任何数据调用但正在重新使用相同 html 的页面可以正常工作。

Department.blade.php

<div class="container">
      <center><h1 id=""> $department->name </h1></center>

//Second location data is being called
<center><h1 class="top-space">Mission Statement</h1></center>
      <!-- Dynamically allow users with permission to change the mission statement -->
      <p id=""> $department->mission_statement </div>

//Accordion HTML
<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          News and Events
        </button>
      </h5>
    </div>
<!-- This should fill with an index view of the department's news and events. OnClick navigate the user to that record in view (layout.single.NandE.blade.php). Control loaded data on-page, only load Card Titles, NandE first. The rest of the card's content should load on a delay to improve user experience -->
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">

      </div>
    </div>
  </div>

Test.blade.php（手风琴工作的文件）

    <div class="card">
      <div class="card-header" id="headingOne">
        <h5 class="mb-0">
          <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            News and Events
          </button>
        </h5>
      </div>
  <!-- This should fill with an index view of the department's news and events. OnClick navigate the user to that record in view (layout.single.NandE.blade.php). Control loaded data on-page, only load Card Titles, NandE first. The rest of the card's content should load on a delay to improve user experience -->
      <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
        <div class="card-body">
          <ul>

            <li>
              <a href="">:</a>
            </li>

          </ul>
        </div>
      </div>
 </div>

期望的行为是，当调用 Department.blade.php 文件时，第一个带有新闻和事件的手风琴会公开显示事件。单击手风琴时，它应该折叠起来。

【问题讨论】：

您是否尝试过将包装 div 的 class 更改为手风琴而不是 id？

是的，我试过了

【参考方案1】：

Bootstrap 的docs 说：

使用卡片组件，您可以扩展默认折叠行为以创建手风琴。要正确实现手风琴风格，请务必使用 .accordion 作为包装器。

尝试改变这个：

//Accordion HTML
<div id="accordion">

对此：

//Accordion HTML 
<div class="accordion">

【讨论】：

我尝试使用类而不是 id，但结果相同

我认为这里的问题不在于 Bootstrap，而在于您的 PHP。您能否更新您的问题以显示如何您引用数据以及在何处引用？