【发布时间】：2019-02-01 04:49:23
【问题描述】：
我正在尝试自学一些 Bootstrap 4 以及构建网站的基础知识。我一直在努力使这个 Accordion 菜单正常工作，但似乎无法正常工作。据我所知，最常见的错误是在 Bootstrap CDN 之后加载 jquery 或未使用 # 符号正确引用 data-parent 属性。到目前为止，我还无法确定我的错误。
我能做些什么来使它正常工作？
这是我的代码，下面没有我的 CSS：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset ="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="cabinAccStyle.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="jumbotron">
<img src="cabinLakePanoramic.jpg" style="width:90%;" class=img-responsive">
</div>
<div id="Accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<!--Collapsible section for Lakeside Family Cabins-->
<div class="panel-heading" role="tab" id="lakesideHeading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#Accordion" href="#lakesideCollapse" aria-expanded="false" aria-controls="lakesideCollapse">
<span class="fas fa-angle-right"></span> Lakeside Family Cabin
</a>
</h4>
</div>
<div id="lakesideCollapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="lakesideHeading">
Lakeside Family Cabins are designed to sleep a maximum of 6 people comfortably all on one level. They are situated along our 7 acre private fishing lake. You can fish, play and cook out just feet from the water.
<br><br>
<!--Lakeside Cabin Booking Calendar-->
<iframe id="bookingcalendar" src="
https://secure.webreserv.com/services/bookingcalendar.do?businessid=cannondamoperationsincmo&productfilter=36270&embedded=y&search=0&avgrid=y&color=000000&bgcolor=EFFF0A&bcolor=FF050D" style="width: 100%; max-width: 800px; height: 400px; border: 0; padding: 0; margin: 0;" frameborder="0">
<a href="
https://secure.webreserv.com/services/bookingcalendar.do?businessid=cannondamoperationsincmo&productfilter=36270&embedded=y&search=0&avgrid=y&color=000000&bgcolor=EFFF0A&bcolor=FF050D">Make Reservation</a></iframe>
</div>
</div>
<!--Collabsible section for 3 Room cabins-->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="threeRoomHeading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#Accordion" href="#threeRoomCollapse" aria-expanded="false" aria-controls="threeRoomCollapse">
<span class="fas fa-angle-right"></span> Lakeside Three Room Cabin
</a>
</h4>
</div>
<div id="threeRoomCollapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="threeRoomHeading">
3 Room Family Cabins have 2 private bedrooms and can sleep up to 6 comfortably. They are situated along our 7 acre private fishing lake. You can fish, play and cook out just feet from the water.
</div>
</div>
<!--Collapsible section for Poolside Family Cabins-->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="poolsideHeading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#Accordion" href="#poolsideCollapse" aria-expanded="false" aria-controls="poolsideCollapse">
<span class="fas fa-angle-right"></span> Poolside Family Cabin
</a>
</h4>
</div>
<div id="poolsideCollapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="poolsideCollapse">
Poolside Family Cabins sleep up to 6 guests, feature full spacious kitchens and are next to our indoor pool.
</div>
</div>
<!--Collabsible section for Motel Rooms-->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="motelHeading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#Accordion" href="#motelCollapse" aria-expanded="false" aria-controls="motelCollapse">
<span class="fas fa-angle-right"></span> Motel Room
</a>
</h4>
</div>
<div id="motelCollapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="motelHeading">
Motel Rooms contain 2 queen beds and can accommodate up to 4 guests. Motel rooms do contain a small refrigerator, microwave and coffee maker. Rooms have access to all amenities, including BBQ facilities, indoor pool and private lake.
</div>
</div>
<!--Collabsible Section for Suites-->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="suiteHeading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#Accordion" href="#suiteCollapse" aria-expanded="false" aria-controls="suiteCollapse">
<span class="fas fa-angle-right"></span> Suites
</a>
</h4>
</div>
<div id="suiteCollapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="suiteHeading">
Cabin suites have multiple cabin or motel units built together to accommodate larger groups.
</div>
</div>
</div>
</div>
<script>
//When opening panel remove chevron-right, add chevron down
$('#Accordion .panel-collapse').on('shown.bs.collapse', function () {$(this).prev().find(".fas").removeClass("fa-angle-right").addClass("fa-angle-down");
});
//When closing panel remove chevron-down, add chevron right
$('#Accordion .panel-collapse').on('hidden.bs.collapse', function () {$(this).prev().find(".fas").removeClass("fa-angle-down").addClass("fa-angle-right");
});
</script>
</body>
</html>【问题讨论】：
标签： bootstrap-4 bootstrap-accordion