英文:
Bootstrap 5 Accordion Body Doesn't Appear
问题
I am in vscode and I am trying to create a website. I am also using Bootstrap 5 to help me create this website and I am trying to use Bootstrap 5 to create an accordion but when I click on the accordion there is no dropdown; the accordion body doesn't show. This is what it currently looks like 
The accordion section of the code can be found in the FAQ SECTION of the code (look for the FAQ SECTION comment)
Index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Your awesome title: </title>
<meta name="description" content="Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." />
<link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="/index.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="/_bridgetown/static/js/main.96ffffaea92690057bfb.js" defer></script>
<script type="module">
let lastmod = 0
function startReloadConnection() {
const evtSource = new EventSource("/_bridgetown/live_reload")
evtSource.onmessage = event => {
if (event.data == "reloaded!") {
location.reload()
} else {
const newmod = Number(event.data)
if (lastmod > 0 && newmod > 0 && lastmod < newmod) {
location.reload()
} else {
lastmod = newmod
}
}
}
evtSource.onerror = event => {
if (evtSource.readyState === 2) {
// reconnect with new object
evtSource.close()
console.warn("Live reload: attempting to reconnect in 3 seconds...")
setTimeout(() => startReloadConnection(), 3000)
}
}
}
setTimeout(() => {
startReloadConnection()
}, 500)
</script>
</head>
<body>
<!-- NAVIGATION BAR START -->
<nav class="navbar navbar-expand-lg navbar-light bg-white py-3">
<div class="container">
<a href="index.html">
<img src="C:\Users\NewMayoAyo\Documents\_Dev\projects\assets\logo-topnav.png" alt=" logo" height="45" width="225" class="img-fluid"/>
</a>
<!-- TOGGLE MENU START -->
<button
type="button"
class="navbar-toggler"
data-bs-toggle="collapse"
data-bs-target="#navmenu"
>
<span class="navbar-toggler-icon"></span>
</button>
<!-- TOGGLE MENU CLOSE -->
<!-- TOGGLE MENU START -->
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
<li class="nav-item"><a href="#" class="nav-link">Services</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
</div>
<!-- TOGGLE MENU CLOSE -->
</div>
</nav>
<!-- NAVIGATION BAR CLOSE -->
<!-- SHOWCASE START -->
<section class="bg-dark text-white text-center text-sm-start p-5 p-lg-0">
<div class="container">
<div class="d-flex align-items-center justify-content-center">
<div>
<h1><span class="text-primary"></span></h1>
<p class="lead py-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem.
</p>
<button type="button" class="btn btn-primary">Get Quote</button>
</div>
<img src="-logo" alt=" logo" class="img-fluid d-none d-lg block"/>
</div>
</div>
</section>
<!-- SHOWCASE CLOSE -->
<!-- FEATURE SECTION START -->
<section>
<div class="container">
<div class="row bg-white mt-5 px-2">
<div class="col-lg-6 col-sm-12">
<img src="-logo" alt=" logo" class="img-fluid"/>
</div>
<div class="col-lg-6 col-sm-12">
<h2 class="display-6">Get a Solution to all your IT Needs in One Place</h2>
<hr>
<p class="lead mt-5">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem.
</p>
<a href="#" class="btn btn-primary mt-3">Read More</a>
</div>
</div>
</div>
</section>
<!-- FEATURE SECTION CLOSE -->
<!-- TEAM SECTION START -->
<section>
<div class="container">
<div class="row bg-white pt-5 px-2">
<div class="col-lg-6 col-sm-12">
<h2 class="display-6">Our Team</h2>
<hr>
<p class="lead mt-5">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem.
</p>
<a href="#" class="btn btn-primary mt-3">Read More</a>
</
<details>
<summary>英文:</summary>
I am in vscode and I am trying to create a website. I am also using Bootstrap 5 to help me create this website and I am trying to use Bootstrap 5 to create an accordion but when I click on the accordion there is no dropdown; the accordion body doesn't show. This is what it currently looks like [![enter image description here][1]][1] The accordion section of the code can be found in the FAQ SECTION of the code (look for the FAQ SECTION comment)
## Index.html
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Your awesome title: </title>
<meta name="description" content="Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." />
<link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="/index.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="/_bridgetown/static/js/main.96ffffaea92690057bfb.js" defer></script>
<script type="module">let lastmod = 0
function startReloadConnection() {
const evtSource = new EventSource("/_bridgetown/live_reload")
evtSource.onmessage = event => {
if (event.data == "reloaded!") {
location.reload()
} else {
const newmod = Number(event.data)
if (lastmod > 0 && newmod > 0 && lastmod < newmod) {
location.reload()
} else {
lastmod = newmod
}
}
}
evtSource.onerror = event => {
if (evtSource.readyState === 2) {
// reconnect with new object
evtSource.close()
console.warn("Live reload: attempting to reconnect in 3 seconds...")
setTimeout(() => startReloadConnection(), 3000)
}
}
}
setTimeout(() => {
startReloadConnection()
}, 500)
</script>
</head>
<body>
<!-- NAVIGATION BAR START -->
<nav class="navbar navbar-expand-lg navbar-light bg-white py-3">
<div class="container">
<a href="index.html">
<img src="C:\Users\NewMayoAyo\Documents\_Dev\projects\\assets\logo-topnav.png" alt=" logo" height="45" width="225" class="img-fluid"/>
</a>
<!-- TOGGLE MENU START -->
<button
type="button"
class="navbar-toggler"
data-bs-toggle="collapse"
data-bs-target="#navmenu"
>
<span class="navbar-toggler-icon">
</button>
<!-- TOGGLE MENU CLOSE -->
<!-- TOGGLE MENU START -->
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
<li class="nav-item"><a href="#" class="nav-link">Services</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
</div>
<!-- TOGGLE MENU CLOSE -->
</div>
</nav>
<!-- NAVIGATION BAR CLOSE -->
<!-- SHOWCASE START -->
<section class="bg-dark text-white text-center text-sm-start p-5 p-lg-0">
<div class="container">
<div class="d-flex align-items-center justify-content-center">
<div>
<h1><span class="text-primary"></span></h1>
<p class="lead py-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem.
</p>
<button type="button" class="btn btn-primary">Get Quote</button>
</div>
<img src="-logo" alt=" logo" class="img-fluid d-none d-lg block"/>
</div>
</section>
<!-- SHOWCASE CLOSE -->
<!-- FEATURE SECTION START -->
<section>
<div class="container">
<div class="row bg-white mt-5 px-2">
<div class="col-lg-6 col-sm-12">
<img src="-logo" alt=" logo" class="img-fluid"/>
</div>
<div class="col-lg-6 col-sm-12">
<h2 class="display-6">Get a Solution to all your IT Needs in One Place</h2>
<hr>
<p class="lead mt-5">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem.
</p>
<a href="#" class="btn btn-primary mt-3">Read More</a>
</div>
</div>
</div>
</section>
<!-- FEATURE SECTION CLOSE -->
<!-- TEAM SECTION START -->
<section>
<div class="container">
<div class="row bg-white pt-5 px-2">
<div class="col-lg-6 col-sm-12">
<h2 class="display-6">Our Team</h2>
<hr>
<p class="lead mt-5">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem.
</p>
<a href="#" class="btn btn-primary mt-3">Read More</a>
</div>
<div class="col-lg-6 col-sm-12">
<img src="" alt="" class="img-fluid"/>
</div>
</div>
</div>
</section>
<!-- TEAM SECTION CLOSE -->
<!-- USER DETAILS START -->
<section>
<div class="container">
<div class="row text-center pt-4">
<div class="col-lg-3 col-md-6">
<i class="fas fa-user fa-3x"></i>
<h2 class="display-6">100</h2>
<p class="text-muted">Active Clients</p>
</div>
<div class="col-lg-3 col-md-6">
<i class="fa-brands fa-windows fa-3x"></i>
<h2 class="display-6">500</h2>
<p class="text-muted">Positive Reviews</p>
</div>
<div class="col-lg-3 col-md-6">
<i class="fa-brands fa-windows fa-3x"></i>
<h2 class="display-6">100</h2>
<p class="text-muted">Active Clients</p>
</div>
<div class="col-lg-3 col-md-6">
<i class="fa-brands fa-windows fa-3x"></i>
<h2 class="display-6">100</h2>
<p class="text-muted">Active Clients</p>
</div>
</div>
</div>
</div>
</section>
<!-- USER DETAILS CLOSE -->
<!-- WEBSITE SECTION START -->
<section>
<div class="container">
<div class="row bg-dark py-5 px-2 text-white">
<div class="col-lg-12 col-sm-12 text-center">
<p>2023 IT Leaders</p>
<h2>Get a Soltion to your Problems</h2>
<a href="#" class="btn btn-primary mt-3">Read More</a>
</div>
</div>
</div>
</section>
<!-- WEBSITE SECTION CLOSE -->
<!-- SERVICES SECTION START -->
<section>
<div class="container">
<div class="row py-5">
<h2 class="display-6 mb-4">Our Services</h2>
<!-- <div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2">
<i class="fas fa-camera fa-3x"></i>
<h4>CCTV Services</h4>
<p class="p-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem. Quisquam
</p>
</div>
</div> -->
<div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2 crd">
<i class="fas fa-database fa-3x"></i>
<h4>Datacenter Support</h4>
<p class="p-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem. Quisquam
</p>
</div>
</div>
<!-- <div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2">
<i class="fas fa-sign-hanging fa-3x"></i>
<h4>Digital Signage</h4>
<p class="p-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem. Quisquam
</p>
</div>
</div> -->
<div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2 crd">
<i class="fas fa-headset fa-3x"></i>
<h4>General Support</h4>
<p class="p-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem. Quisquam
</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2 crd">
<i class="fas fa-server fa-3x"></i>
<h4>Network Support</h4>
<p class="p-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem. Quisquam
</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2 crd">
<i class="fas fa-cash-register fa-3x"></i>
<h4>POS Services</h4>
<p class="p-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem. Quisquam
</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2 crd">
<i class="fas fa-tower-cell fa-3x"></i>
<h4>Telecom Services</h4>
<p class="p-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem. Quisquam
</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2 crd">
<i class="fa-solid fa-bars fa-3x"></i>
<h4>Additional Services</h4>
<p class="p-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem. Quisquam
</p>
</div>
</div>
</div>
</div>
</section>
<!-- SERVICES SECTION CLOSE -->
<!-- FAQ SECTION START -->
<section>
<div class="container">
<div class="row py-2">
<h2 class="display-6">Freqently Asked Questions</h2>
<div class="col-lg-6 col-md-6 text-center">
<div class="accordion accordion-flush" id="accordionflush">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#flush-CollapseOne"
>
Nulla do magna aliquip elit culpa.
</button>
</h2>
<div
id="#flush-CollapseOne"
class="accordion-collapse collapse"
data-bs-parent="#accordionflush"
>
<div class="accordion-body">
Elit elit irure ad deserunt. Ipsum aliquip amet amet sit duis excepteur. Sit commodo duis aliqua amet. Deserunt Lorem nulla ut pariatur id eiusmod aliqua est nostrud Lorem et nostrud nostrud.
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 text-center">
<img src="./assets/logo-topnav.png" alt="" class="img fluid" />
</div>
</div>
</div>
</section>
<!-- FAQ SECTION CLOSE -->
</body>
</html>
Index.css
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body {
background: #f1f2fa;
font-family: 'Poppins', sans-serif;
}
hr {
border: 1.5px solid #0b5ed7
}
.crd {
background-color: #f1f2fa;
transition: all;
}
.crd:hover {
background: #0b5ed7;
color: #fff;
transition: 0.5s;
}
答案1
得分: 0
你尚未添加data-bs-parent和aria-labelledby属性。
<!doctype html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<section>
<div class="container">
<div class="row py-2">
<h2 class="display-6">Freqently Asked Questions</h2>
<div class="col-lg-6 col-md-6 text-center">
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-CollapseOne" aria-expanded="false"
aria-controls="flush-collapseOne">
Nulla do magna aliquip elit culpa.
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse"
aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to
demonstrate the <code>.accordion-flush</code> class. This is the first item's
accordion body.</div>
</div>
<div id="flush-CollapseOne" class="accordion-collapse collapse"
aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
Elit elit irure ad deserunt. Ipsum aliquip amet amet sit duis excepteur. Sit commodo
duis aliqua amet. Deserunt Lorem nulla ut pariatur id eiusmod aliqua est nostrud
Lorem et nostrud nostrud.
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 text-center">
<img src="./assets/logo-topnav.png" alt="" class="img fluid" />
</div>
</div>
</div>
</section>
<!-- FAQ SECTION CLOSE -->
</body>
</html>
英文:
You have not added data-bs-parent and aria-labelledby attributes
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!doctype html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<section>
<div class="container">
<div class="row py-2">
<h2 class="display-6">Freqently Asked Questions</h2>
<div class="col-lg-6 col-md-6 text-center">
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-CollapseOne" aria-expanded="false"
aria-controls="flush-collapseOne">
Nulla do magna aliquip elit culpa.
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse"
aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to
demonstrate the <code>.accordion-flush</code> class. This is the first item's
accordion body.</div>
</div>
<div id="flush-CollapseOne" class="accordion-collapse collapse"
aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
Elit elit irure ad deserunt. Ipsum aliquip amet amet sit duis excepteur. Sit commodo
duis aliqua amet. Deserunt Lorem nulla ut pariatur id eiusmod aliqua est nostrud
Lorem et nostrud nostrud.
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 text-center">
<img src="./assets/logo-topnav.png" alt="" class="img fluid" />
</div>
</div>
</div>
</section>
<!-- FAQ SECTION CLOSE -->
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论