Блог

Я написал этот код, но часть «JS» не работает. Я попытался загрузить файлы JS в папку и правильно вызвать ее, приведенный ниже пример должен быть «универсальным», потому что я вызываю «cdn», но почему-то раздел «свернуть» не отвечает. У меня есть несколько проблем в остальной части кода, например, меню гамбургеров в мобильной версии также не расширяется. Очевидно, что у сценария есть проблема, но я пока не могу этого понять.

В этом примере я показываю вам, как мне удалось вставить загрузчик

Я сейчас серьезно волнуюсь. Есть какие-нибудь идеи или предложения?

 lt;!doctype htmlgt; lt;html lang="en"gt;  lt;headgt;  lt;!-- Required meta tags --gt;  lt;meta charset="utf-8"gt;  lt;meta name="viewport" content="width=device-width, initial-scale=1"gt;   lt;!-- Bootstrap CSS --gt;  lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"gt;   lt;titlegt;Hello, world!lt;/titlegt;  lt;/headgt;  lt;bodygt;  lt;div class="container col-12 mt-5"gt;  lt;div class="accordion w-100" id="basicAccordion"gt;  lt;div class="accordion-item"gt;  lt;h2 class="accordion-header" id="headingOne"gt;  lt;button class="accordion-button collapsed" type="button" data-mdb-toggle="collapse"  data-mdb-target="#basicAccordionCollapseOne" aria-expanded="false"  aria-controls="collapseOne"gt;  ¿En cuanto tiempo voy a poder ver cambios?  lt;/buttongt;  lt;/h2gt;  lt;div id="basicAccordionCollapseOne" class="accordion-collapse collapse"  aria-labelledby="headingOne" data-mdb-parent="#basicAccordion"gt;  lt;div class="accordion-body"gt;  Lorem ipsum dolor sit   lt;/divgt;  lt;/divgt;  lt;/divgt;   lt;/divgt;  lt;/divgt;  lt;script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7 zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"gt;lt;/scriptgt; lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"gt;lt;/scriptgt;  lt;/bodygt; lt;/htmlgt;  

Извините за мой английский

Вы просто неправильно использовали аккордеоны. Я заменил ваш аккордеон примером из документации Bootstrap, и теперь он работает просто отлично.

Вы используете data-mdb-target кнопку на аккордеоне, когда вам следует использовать data-bs-target . data-mdb-parent так и должно быть data-bs-parent . Если вы измените их или просто используете приведенный ниже фрагмент, проблема будет устранена.

 lt;!doctype htmlgt; lt;html lang="en"gt;  lt;headgt;  lt;!-- Required meta tags --gt;  lt;meta charset="utf-8"gt;  lt;meta name="viewport" content="width=device-width, initial-scale=1"gt;   lt;!-- Bootstrap CSS --gt;  lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"gt;   lt;titlegt;Hello, world!lt;/titlegt;  lt;/headgt;  lt;bodygt;  lt;div class="container col-12 mt-5"gt;  lt;div class="accordion" id="accordionExample"gt;  lt;div class="accordion-item"gt;  lt;h2 class="accordion-header" id="headingOne"gt;  lt;button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"gt;  ¿En cuanto tiempo voy a poder ver cambios?  lt;/buttongt;  lt;/h2gt;  lt;div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"gt;  lt;div class="accordion-body"gt;  lt;stronggt;Lorem ipsum dolor sit   lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"gt;lt;/scriptgt;  lt;script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7 zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"gt;lt;/scriptgt; lt;/bodygt; lt;/htmlgt; 

Попробуй это, братан, это работает

 lt;!doctype htmlgt; lt;html lang="en"gt;  lt;headgt;  lt;!-- Required meta tags --gt;  lt;meta charset="utf-8"gt;  lt;meta name="viewport" content="width=device-width, initial-scale=1"gt;   lt;!-- Bootstrap CSS --gt;  lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"gt;   lt;titlegt;Hello, world!lt;/titlegt;  lt;/headgt;  lt;bodygt;  lt;h1gt;Hello, world!lt;/h1gt;    lt;div class="container col-12 mt-5"gt;  lt;div class="accordion w-100" id="basicAccordion"gt;  lt;div class="accordion-item"gt;  lt;h2 class="accordion-header" id="headingOne"gt;  lt;button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"gt;  Accordion Item #1  lt;/buttongt;  lt;/h2gt;  lt;div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"gt;  lt;div class="accordion-body"gt;  lt;stronggt;This is the first item's accordion body.lt;/stronggt; It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the lt;codegt;.accordion-bodylt;/codegt;, though the transition does limit overflow.  lt;/divgt;  lt;/divgt;  lt;/divgt;   lt;/divgt;  lt;/divgt;      lt;!-- Optional JavaScript; choose one of the two! --gt;   lt;!-- Option 1: Bootstrap Bundle with Popper --gt;  lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"gt;lt;/scriptgt;   lt;!-- Option 2: Separate Popper and Bootstrap JS --gt;  lt;!--  lt;script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"gt;lt;/scriptgt;  lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u LWgxfKTRIcfu0JTxR EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"gt;lt;/scriptgt;  --gt;  lt;/bodygt; lt;/htmlgt;