问题描述
我使用 bootstrap 4 创建了一个切换折叠按钮，当我点击它时内容折叠，但当我再次点击时它不会关闭。插件假设由 bootstrap 库提供的 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/popper.js@1.16.1/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,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,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,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">×</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>解决方法
不要忘记包含所有必要的 CSS 样式表和 bootstrap javascript 插件。您还应该包含 jQuery CDN，以便它执行 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/
,这应该有效。确保您已导入如下所示的引导程序和 Js 链接。
<!--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>