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

Question

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

我的代码在这里。 （点击“Sobre Paygol”、“Vendedores”和“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

根据 Chrome 中的开发人员选项卡，错误似乎在popper.min.js.map中。

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

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

Answer 2

我认为您的问题与源映射错误无关。 您的 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 /> 。这搞砸了手风琴插件。