無法使用 Bootstrap 折疊
[英]unable to collapse using Bootstrap Collapse
問題描述
我正在一個網站上工作，該網站用於使用垂直折疊手風琴顯示新聞。我正在使用外部 API 來獲取新聞。 我一次只需要顯示新聞。 當我點擊第二個新聞標題時，我需要隱藏/折疊第一個新聞描述。 同樣，當我點擊任何新聞時，我希望其余新聞保持折疊/隱藏，但這不起作用。 （見網頁截圖）
這里是 html 和 JS 代碼。
JS：
let display = document.getElementById("display"); const xhr = new XMLHttpRequest; xhr.open("GET", "https://newsapi.org/v2/top-headlines?sources=bbc-news&apiKey=70893d07e43d413faf7813e13df0f8aa", true) xhr.onload = function () { let strHtml = ""; if (this.status === 200) { let newsObj = JSON.parse(this.responseText); let newsArticles = newsObj.articles; console.log(newsArticles) newsArticles.forEach(function (element, index) { //newsArticle --> an array which contains the news data including the title and description of the news let str = `<div class="accordion-item"> <h2 class="accordion-header" id="heading${index}"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse${index}" aria-expanded="false" aria-controls="collapse${index}"> ${element.title} </button> </h2> <div id="collapse${index}" class="accordion-collapse collapse" aria-labelledby="heading${index}" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong> ${element.description}</strong> <a href="${element.url}" target="_blank" <button type="button" class="btn btn-primary">Learn more</button> </a> </div> </div> </div>` strHtml += str; //append news data into strHtml string }); } else { console.log("some error") } display.innerHTML = strHtml; //to display the news on the page } xhr.send();
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">BBC News</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li> <hr class="dropdown-divider"> </li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link disabled">Disabled</a> </li> </ul> <form class="d-flex"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> </div> </div> </nav> <div class="container my-3"> <h3><span class="badge bg-primary">Top news</span> </h3> </div> <hr> <div class="container accordionExample" > <div class="accordion" id="display"> </div> </div> </div> <script src="./JS/index.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> </body> </html>
2 個解決方案
解決方案1
0 已采納 2021-10-27 08:49:22
你的手風琴周圍需要一個帶有父 ID 的<div> ：
<div class="accordion" id="accordionExample">
在你的.collapse元素中你需要那個
data-bs-parent="#accordionExample"
你已經有了。 所以我想這只是缺少的包裝器。
解決方案2
0 2021-10-27 09:20:05
嘗試用下面的變量替換“str”變量。 它應該工作。
let str = `<div class="card">
<div class="accordion-header" id="heading${index}">
<h5 class="mb-0">
<button class="btn" data-toggle="collapse" data-target="#collapse${index}" aria-expanded="true" aria-controls="collapse${index}">
${element.title}
</button>
</h5>
</div>
<div id="collapse${index}" class="collapse collapse" aria-labelledby="heading${index}">
<div class="accordion-body">
<strong> ${element.description}</strong>
<a href="${element.url}" target="_blank" <button type="button" class="btn btn-primary">Learn more</button> </a>
</div>
</div>
</div>`
在表中使用引導崩潰和div時如何避免緩慢崩潰
[英]How to avoid slow collapse when using bootstrap collapse and div in a table
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.