Кнопка переключения bootstrap4 не скрывает содержимое

Я создал кнопку переключения свертывания с помощью bootstrap 4, когда я нажимаю на нее, содержимое схлопывается, но когда я нажимаю снова, она не закрывается. предполагается, что плагины обрабатываются ссылками JS, предоставляемыми библиотекой начальной загрузки, и даже когда я добавил функцию предоставления JS в документацию, она не работает. Я не знаю, что мне здесь не хватает.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mentors</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
        integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="index.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

</head>

<body
    style="background-image: url(./img/Backgrounds/mentors-bg.png);background-attachment: fixed; background-repeat: no-repeat; background-position: center; background-size: cover;">
    <!--navigation bar-->
    <hr class="bar m-0 p-0" />
    <nav class="navbar navbar-expand-md navbar-light p-0">
        <div class="container-fluid">
            <div class="navbar-brand mt-0 pt-0 "><img src="./img/logos/GAM logo.svg"></div>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse ">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item active">
                        <a class='nav-link  active pl-0 pr-4 mt-5 pb-0' href='./home.html'><span class="material-icons">
                                account_balance
                            </span><br>HOME</a>
                    </li>
                    <li class='nav-item'>
                        <a class='nav-link pr-4 mt-5 pb-0' href='./about-us.html'><span class="material-icons">
                                message
                            </span><br>ABOUT US</a>
                    </li>
                    <li class='nav-item'>
                        <a class='nav-link pr-4 mt-5 pb-0' href='./courses.html'><span class="material-icons">
                                library_books
                            </span><br>COURSES</a>
                    </li>
                    <li class='nav-item'>
                        <a class='nav-link pr-4 mt-5 pb-0' href='./mentors.html'><span class="material-icons">
                                groups
                            </span><br>MENTORS</a>
                    </li>
                    <li class='nav-item'>
                        <a class='nav-link register-link pl-2 mt-5 pr-3 pb-0 text-danger' href='./register.html'><span
                                class="material-icons">
                                assignment
                            </span><br>REGISTER</a>
                    </li>
                </ul>
            </div>
            <a href="./testimonials.html"><img src="./img/logos/testimonials logo.svg"></a>
        </div>
    </nav>
    <hr class="bar m-0 p-0" />
    <!--Mentor 1-->
    <div class="container">
        <div class="row">
            <div class="col-4 mt-5">
                <img src="./img/Mentors/jeremy cotroneo .svg" class="img-fluid img-thumbnail" alt="Responsive image">
                <p>
                    <stong>JEREMY COTRONEO (BS Econ)</stong>
                </p>
                <p>English, Math, Exam preparation <br>(GMAT, SAT, PSAT, SSAT)</p>

                <button class="btn btn-outline-light" type="button" data-toggle="collapse" data-target="#collapse1"
                    aria-expanded="false" aria-controls="collapseExample1">
                    Bio
                </button>
                <div class="collapse" id="collapse1">
                    <div class="card card-body text-dark">
                        Originally from the US, Jeremy fell in love with travel and international studies during a
                        semester
                        in Italy, where took up residence and currently spends most the year. Armed with a degree in
                        Business
                        Economics and Italian Studies from the University of California Santa Barbara, he has spent the
                        last 15 years seeking to
                        enhance multi-national understanding through the facilitation of cross-cultural experiences in
                        the US,
                        Europe and elsewhere.<br>
                        As a mentor, Jeremy's relationships with students tends to be long-lasting due to his sincere
                        interest in helping
                        them not only with school work, but also with their intangible skills which will help them
                        develop as people and
                        lead them to further success in life. In every course he teaches, Jeremy aims to share his rich
                        background of international travel, piquing students' curiosity about the world beyond their
                        hometown.
                    </div>
                </div>
            </div>
            <!-- MENTOR 2 -->
            <div class="col-4 mt-5">
                <img src="./img/Mentors/troy fillman.svg" class="img-fluid img-thumbnail" alt="Responsive image">
                <p>
                    <stong>TROY FILLMAN (MS Ed)</stong>
                </p>
                <p>AP English, Literature, Academic Writing, Creative Writing, Philosophy (for Living),
                    Exam Prep, SSAT, SAT, ACT (VERBAL) History of Pirates in Colonial America</p>

                <button class="btn btn-outline-light" type="button" data-toggle="collapse" data-target="#collapse2"
                    aria-expanded="false" aria-controls="collapseExample">
                    Bio
                </button>

                <div class="collapse" id="collapse2">
                    <div class="card card-body text-dark">
                        Education Background: University of Pennsylvania-Master of Science in Education Cambridge
                        University,
                        London-TEFL Certification University of Pittsburgh-Bachelor of Arts, English Literature &
                        Philosophy.<br>One of GAM's
                        three managing partners, Troy has 27 years of instructional, coaching, administration &
                        leadership experience.
                        He has held positions in international and American K-12 schools and Universities. Troy has
                        taught, developed,
                        and coordinated AP, EFL/ESL, Common Core, and IB English Language programs in South Korea,
                        Bulgaria, Switzerland,
                        C.N.M.I. (Island of Rota), the Republic of Georgia, Morocco, Mexico, and the United States.
                        Today, Troy lives on the
                        Mediterranean coast with his wife, where he enjoys reading, writing, teaching, photography,
                        cooking and walking his dog
                        on the beach.
                    </div>
                </div>
                <div class="collapse" id="collapseExample-testi">
                    <div class="card card-body">
                        testimonials
                    </div>
                </div>
            </div>
            <!-- MENTOR 3 -->
            <div class="col-4 mt-5">
                <img src="./img/Mentors/rayan wenzel.svg" class="img-fluid img-thumbnail" alt="Responsive image">
                <p>
                    <stong>RYAN WENZEL (MBA MPA MEd MA Comm)</stong>
                </p>
                <p>SSAT/ ISEE/ HSPT and PSAT/SATs<br> US and World History, Critical Reading, Writing, Public Speaking,
                    College Entrance Exams</p>

                <button class="btn btn-outline-light" type="button" data-toggle="collapse" data-target="#collapse3"
                    aria-expanded="false" aria-controls="collapseExample">
                    Bio
                </button>
                <div class="collapse" id="collapse3">
                    <div class="card card-body text-dark">
                        Ryan Wenzel is a multi-disciplinary college instructor in New Mexico. <br>To date, he has earned
                        a
                        BS in Management, and MBA, an MPA, an MEd, and an MA in Communication. <br>Ryan has classroom
                        experience teaching both adults and younger learners, as well as over a decade of experience as
                        a
                        tutor and skills instructor. <br> Ryan specializes in tutoring younger students who are working
                        to improve
                        their scores on standardized tests such as the SSAT, ISEE, HSPT, and PSAT/SATs. <br>He also
                        offers tutoring
                        in US and World History, as well as critical reading, writing, public speaking, and college
                        entrance exams.
                    </div>
                </div>
            </div>
            <!-- MENTOR 4 -->
            <div class="col-4 mt-5">
                <img src="./img/Mentors/rafael quintero.svg" class="img-fluid img-thumbnail" alt="Responsive image">
                <p>
                    <stong>DR. RAFAEL QUINTERO<br>(BSc Chem & Phys MSc PhD)</stong>
                </p>
                <p></p>
                <p>General Science, Biology, Chemistry, Physics</p>

                <button class="btn btn-outline-light" type="button" data-toggle="collapse" data-target="#collapse4"
                    aria-expanded="false" aria-controls="collapseExample">
                    Bio
                </button>
                <button class="btn btn-outline-light" type="button" data-toggle="collapse" data-target="#collapse5"
                    aria-expanded="false" aria-controls="collapseExample">
                    Bio Es
                </button>
                <div class="collapse" id="collapse4">
                    <div class="card card-body text-dark">
                        Hi! I am Dr. Rafael Quintero, I hold a PhD, MSc and BSc in Chemical Physics. I have been an
                        International Teacher for the last 12 years; mostly for the IB System, for which I am also
                        Certified
                        and Examiner. I blend my significant experience from Industry, Academia, Entrepreneuring and
                        Martial
                        Arts with your personal interests, be them Arts, Literature, Social Sciences, Humanities or
                        plain
                        Engineering and Medicine. My hope is to assist you in whatever areas you would like to improve.
                    </div>
                </div>
                <div class="collapse" id="collapse5">
                    <div class="card card-body text-dark">
                        Hola! Soy el Dr. Rafael Quintero. Tengo Ph.D., MSc. y Lic. En Química Física. En los últimos 12
                        años me he desempeñado como profesor en Educación Internacional, principalmente en el Sistema
                        IB, para el cual estoy Certificado y soy Examinador. Yo combino mi significativa experiencia en
                        los mundos industriales, académicos, de emprendimiento y de las artes marciales con tus
                        intereses personales, sean éstos en Arte, Literatura, Ciencias Sociales, Humanidades o
                        simplemente Ingeniería o Medicina. Mi anhelo es asistirte a crecer sobre aquello que me lleva a
                        aparecer en tu entorno.
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
    <!-- contact us button -->
    <a class="float" data-toggle="modal" data-target="#exampleModal" type="button">
        <img src="./img/logos/contact-us03.png">
    </a>
    <!--contact us-form-->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title font-weight-bold" id="exampleModalLabel">Contact us</h4>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="form-sub-title m-3">Please fill out our online form below. One of our team members will be
                    in touch
                    within 24 business hours.
                </div>
                <div class="modal-body">
                    <form method="post" id="contact-us-form">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col">
                                    <input type="text" class="form-control mb-3 " id="InputName" placeholder="Name">
                                </div>
                                <div class="col">
                                    <input type="email" class="form-control" id="InputEmail" placeholder="Email">
                                </div>
                            </div>
                            <div class="form-group">
                                <input type="text" class="form-control input mb-3 " id="InputSubject"
                                    placeholder="Subject">
                            </div>
                            <div class="form-group">
                                <textarea class="form-control" rows="5" id="message-text"
                                    placeholder="Message"></textarea>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn" onclick="sendEmail()">Send message</button>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>

    <!--footer
 <footer>
    <div class="footer-info">
      <div class="container">
        <div class="d-flex justify-content-around">
            
            <div class="mt-4"></div>
        </div>
      </div>
  </footer>-->
    <!--footer-->
    <div id="page-container">
        <div id="content-wrap">
        </div>
        <footer id="footer">
            <div class="footer-info">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-4">
                            <a class="text-light mt-4" href="./privacy-policy.html">Privacy policy</a>
                        </div>
                        <div class="col-sm-4">
                            <P>Copyright © 2021 Global Academic Mentors, LLC. All rights reserved</P>
                        </div>
                    </div>
                </div>
        </footer>
    </div>


    <script src="/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
    <script src="https://smtpjs.com/v3/smtp.js"></script>
    <script src="./index.js"></script>
</body>


</html>


person Housni    schedule 17.04.2021    source источник
comment
Все работает хорошо на моем компьютере. Еще раз проверьте версию Bootstrap и ссылки JS.   -  person Anwar Hossen    schedule 17.04.2021
comment
Привет и добро пожаловать в StackOverflow. Если вы все еще сталкиваетесь с той же проблемой, отредактируйте свой фрагмент кода и включите Bootstrap css и js библиотеки, которые вы используете. Таким образом, мы можем лучше помочь вам   -  person Parzival    schedule 18.04.2021


Ответы (2)


Не забудьте включить все необходимые таблицы стилей CSS и плагин bootstrap javascript. Вы также должны включить CDN jQuery, чтобы он мог запускать плагины Bootstrap JavaScript. Посмотрите фрагмент ниже. Я немного упростил ваш код, так как вам не нужны все эти атрибуты из документации Bootstrap.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<button data-toggle="collapse" data-target="#test">Collapse</button>
<div id="test" class="collapse">
Hello World
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Изменить

Вы должны удалить свой JQuery CDN из головы, так как он вам нужен только после тела. Вот исправленная версия: http://jsfiddle.net/3dfay5xj/

person Steven Oh    schedule 17.04.2021
comment
спасибо, я скопировал ваш код, чтобы попробовать, у меня все еще та же проблема. Это должно быть что-то другое - person Housni; 18.04.2021
comment
@Housni, могу я увидеть твой полный код? Можете ли вы добавить свой полный код к своему вопросу? - person Steven Oh; 18.04.2021
comment
Привет @Steven О, я поместил весь код в сообщение - person Housni; 18.04.2021
comment
@Housni проверьте эту ссылку для исправленной версии: jsfiddle.net/stevenohohohoh/3dfay5xj Я просто удалил ваш Ссылка на JQuery в шапке, так как она нужна только в базе и это исправляет! - person Steven Oh; 18.04.2021
comment
Большое вам спасибо, ваша жизнь безопаснее, я не могу отблагодарить вас достаточно! Я младший разработчик, мой первый проект в качестве фрилансера, и я собираюсь его развернуть. - person Housni; 18.04.2021
comment
@Housni нет проблем!!!! Не за что. Можете ли вы проголосовать за мой ответ или выбрать мой ответ в качестве решения: D lol - person Steven Oh; 18.04.2021
comment
Я пытался, но постоянно получаю это сообщение: Спасибо за отзыв! Голоса, отданные теми, у кого репутация менее 15, записываются, но не изменяют публично отображаемый результат публикации. - person Housni; 18.04.2021
comment
@Housni, о, вот почему. Тогда не переживайте, ха-ха, удачи во всем! - person Steven Oh; 18.04.2021

Это должно работать. Убедитесь, что вы импортировали bootstrap и Js Links, как показано ниже.


    <!--Bootstrap-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
        Bio
      </button>
   <div class="collapse" id="collapseExample">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>

    <!--Javascript-->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
person Brian Mweu    schedule 17.04.2021
comment
спасибо за ваш ответ, я импортировал все необходимые ссылки, но все еще не работает! не уверен, почему - person Housni; 18.04.2021
comment
Хорошо, вероятно, классы, которые вы используете. Хотя интересно, почему вам пришлось понизить голос, поскольку код работает хорошо. - person Brian Mweu; 18.04.2021
comment
я не минусовал - person Housni; 18.04.2021
comment
это нормально, наверное, кто-то другой сделал. - person Brian Mweu; 19.04.2021
comment
Я все равно не могу голосовать ни за, ни против, я новичок, но спасибо, что помогли мне. - person Housni; 19.04.2021
comment
ладно не заметил. - person Brian Mweu; 20.04.2021