我正在尝试教自己一些Bootstrap 4，以及构建网站的基础知识。我一直在尝试使此手风琴菜单正常工作，但似乎无法使其正常工作。从我已经发现的最常见的错误中，可以是在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>
答案 0 :(得分：0)
在上面的示例中，您正在使用Bootstrap 3的手风琴。由于您使用的是Bootstrap 4 JS和CSS，因此会产生一些错误。
以下是4.2.1的文档：https://getbootstrap.com/docs/4.2/components/collapse/#accordion-example
尝试：
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>