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

Question

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

我的代码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 文件。

Answer 1

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

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

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

Answer 2

我认为您的问题与源映射错误无关。您的 HTML:

有多个错误

错误的parent ID
额外的 .hide class 防止显示可折叠内容
具有相同 ID 的多个元素，例如 #accordion

在第 http://18.230.62.117/support.html#faqAboutPaygol 页上，您 HTML 中的 parent 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>

看到你的 accordion 的 id 是“accordionQuestions”，但是你的 data-parent="#accordion".

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

<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 />。这搞砸了手风琴插件。

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

Why isn't my Bootstrap accordion working properly?

html

javascript

accordion

bootstrap-4