Bootstrap 4 collapse-accordion 尽管标记有效但仍无法正常工作

Question

我的手风琴曾经与 Bootstrap 4 的早期版本一起工作。测试我的网站时，我发现尽管有有效的 HTML 标记，但我所有的手风琴都坏了。在这里查看：https://www.diabeclic.com/education/sexualite

经过 3 天的尝试修复错误后，我对此感到绝望，非常感谢您的帮助。

这是我的手风琴标记。

<div id="accordion-vueliste">
<!--accordion-->
<article class="card card-body py-1 mb-2">
    <h3 class="collapsed" data-toggle="collapse" data-target="#32" aria-expanded="false">1 - L’impuissance, c’est
        l’incapacité à maintenir une érection suffisante pour permettre une activité sexuelle satisfaisante ?</h3>
    <div id="32" class="collapse" data-parent="#accordion-vueliste">
        <p class="text-center lead font-weight-bold text-success ">Vrai <i class="fa fa-check fa-2x"></i></p>

        <p class="text-block">Le terme d’impuissance a été remplacé par celui de dysfonction érectile. Sa
            définition
            incomplète est dans l’intitulé de la question.<br>
            On la précise en ajoutant le caractère persistant des troubles : ils persistent depuis au moins 3 mois.<br>
            Des traitements efficaces peuvent être proposés dans le cadre d’un suivi avec votre médecin traitant.</p>
        <hr>
        <ul class="list-unstyled text-center liste-sources">
            <li class="text-sexualite">Dernière modification le 30/05/2016</li>
            <li><a href="http://www.aihus.fr/prod/data/aihus/vie/recommandationsauxmedecins2010.pdf" target="_blank"
                    rel="nofollow">Cuzin
                    B, Cour F, Bousquet P-J, Bondil P, Bonierbale M, Chevret-Measson M, et al. Recommandations aux
                    médecins
                    généralistes pour la prise en charge de première intention de la dysfonction érectile
                    (réactualisation 2010).
                    Sexologies. janv 2011;20(1):66-79.</a></li>
            <li><a href="http://www.ncbi.nlm.nih.gov/pubmed/?term=The+National+Institutes+of+Health+Consensus+Development+Conference+on+Impotence+was+convened+to+address"
                    target="_blank" rel="nofollow">NIH Consensus Conference. Impotence. NIH Consensus Development
                    Panel on
                    Impotence. JAMA. 7 juill 1993;270(1):83-90.</a></li>
        </ul>
    </div>
</article>

以及我使用的脚本：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>

Answer 1

这实际上是一个很好的，有时可能很难理解！它不起作用的原因是因为您的整数 ID 无效！

开始于 HTML 4:

When specified on HTML elements, the id attribute value must be unique amongst all the IDs in the element's tree and must contain at least one character. The value must not contain any space characters (https://www.w3.org/TR/html5/dom.html#element-attrdef-global-id)

因此解决方法是向可折叠容器 ID 属性添加字符！

...
<h3 class="collapsed" data-toggle="collapse" data-target="#test-32" aria-expanded="false">
    1 - L’impuissance, c’est l’incapacité à maintenir une érection suffisante
    pour permettre une activité sexuelle satisfaisante ?
</h3>
<div id="test-32" class="collapse show" data-parent="#accordion-vueliste">
...

演示： http://jsfiddle.net/davidliang2008/xgLv5csa/

Bootstrap 4 collapse-accordion 尽管标记有效但仍无法正常工作

Bootstrap 4 collapse-accordion not working despite valid markup

bootstrap-accordion

bootstrap-4