为什么我的 Bootstrap 手风琴不能正常工作？

Question

我正在使用 Bootstrap 4 构建一个站点，并且我有 3 个<div>，每个都包含一个手风琴。每个<div> 都有自己的id，这样我就可以显示/隐藏我想要的那个。我在打开和折叠所有手风琴的某些部分时遇到问题（当我打开一个时，另一个不会关闭。其他的根本不会打开）。

我的代码here。 （点击“Sobre Paygol”、“Vendores”和“Compradores”按钮）。

我无法在我的代码中固定错误。唯一看起来奇怪的是，当我打开控制台时，出现以下错误：

popper.min.js.map:1 Uncaught SyntaxError: Unexpected token ':'

由于我没有 JS 知识，我不知道这是否会导致问题。我一直使用 Bootstrap 4，这是我第一次看到这个错误。

我的脚本是这样加载的：

<script src="js/popper.min.js"></script>
<script src="js/popper.min.js.map"></script>
<script src="js/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
crossorigin="anonymous"></script>

请注意，我在第二行添加了我从 Github 下载的 popper.min.js.map 文件。

Answer 1

我认为您的问题与源映射错误无关。您的 HTML 中有多个错误：

1. 错误的家长 ID
2. 额外的 .hide 类，可防止显示折叠项
3. 具有相同 ID 的多个元素，例如 #accordion

在页面 http://18.230.62.117/support.html#faqAboutPaygol，您的 HTML 中有错误的父 ID。

<div id="accordionQuestions" class="accordion-faq">
    <div class="card">
        <div class="card-header" id="headingQuestionOne">
            <h5 class="mb-0">
                <button class="btn btn-link" data-toggle="collapse" 
                    data-target="#collapseQuestionOne" aria-expanded="true" 
                    aria-controls="collapseQuestionOne">
                      ¿Qué es Paygol?
                </button>
            </h5>
        </div>
        <div id="collapseQuestionOne" class="collapse show" 
            aria-labelledby="headingQuestionOne" data-parent="#accordion" style="">
            <div class="card-body">
                Paygol es una plataforma de pago en línea que permite a vendedores 
                recibir pagos a través de una amplia variedad de métodos de pago de 
                una manera rápida y fácil.
            </div>
        </div>
    </div>
    <div class="card" />
    <div class="card" />
</div>

看到您的手风琴的 id 是“accordionQuestions”，但您的 data-parent="#accordion"。

在页面 http://18.230.62.117/support.html#faqVendedores 上，您在第一个可折叠页面上有一个额外的 .hide 类：

<div id="accordion" class="accordion-faq">
    <div class="card">
        <div class="card-header" id="headingQuestionOne">
            <h5 class="mb-0" />
        </div>    
        <div id="collapseQuestionOne" class="hide collapse">
            <div class="card-body" />
        </div>
    </div>
    <div class="card" />
    ...
</div>

这就是为什么即使你点击它也不会打开第一个可折叠的。

http://18.230.62.117/support.html#faqCompradores 页面再次出现这种情况。

另外请注意，由于您正在执行单页应用程序，因此您不能有多个具有相同 ID 的元素，例如，<div id="#accordion />。这搞砸了手风琴插件。

Answer 2

根据 Chrome 中的开发者标签，错误似乎在 popper.min.js.map 中。

所以从popper.min.js 中删除以下行。它一直在底部。之后可以删除地图文件。

//# sourceMappingURL=popper.min.js.map