无法使用 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.