Bootstrap 4 не работает, несмотря на правильную разметку - PullRequest
0 голосов
/ 29 октября 2018

мой аккордеон раньше работал с более ранними версиями 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>

1 Ответ

0 голосов
/ 29 октября 2018

Это на самом деле хороший и иногда может быть сложно разобраться! Причина, по которой он не работает, заключается в том, что ваши целочисленные идентификаторы недействительны!

Начиная с HTML 4:

Если указано для элементов HTML, значение атрибута id должно быть уникальным среди всех идентификаторов в дереве элемента и содержать хотя бы один символ. Значение не должно содержать пробелов (https://www.w3.org/TR/html5/dom.html#element-attrdef-global-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/aq9Laaew/259030/

...