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

问题描述

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

我的代码 here。（单击“ 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文件。

解决方法

根据Chrome中的“开发人员”标签，看来是popper.min.js.map中的错误。

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

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

我认为您的问题与源地图错误无关。您的HTML上有多个错误：

错误的家长ID
防止隐藏的额外.hide类
多个具有相同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 />。这搞砸了手风琴插件。

accordion bootstrap-4 html javascript