英文:
Bootstrap 5 - Can expand but not collapse navbar
问题
我曾经使用较早版本的Bootstrap，但现在尝试迁移到当前版本5.3.0。我正在使用模板代码，已经更新为当前的Bootstrap版本。
我目前正在尝试让导航栏工作，但只能部分成功；在小屏幕上，我可以展开导航栏，但当我想要收起导航栏时，切换按钮不起作用。我已经仔细查看了代码，但感觉有点看不清问题在哪里。
以下是您提供的代码片段，我已翻译好：
<!DOCTYPE html>
<html lang="en">
<head>
<title>StrindbergAppen</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 加载外部样式 -->
<link rel="stylesheet" type="text/css" href="./css/style.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- 加载用于菜单按钮图标的脚本 -->
<script src="https://unpkg.com/feather-icons"></script>
<script>
/* ----- SPA - 单页应用逻辑的JavaScript ----- */
// 帮助函数，显示具有ID page+p的页面并隐藏所有其他页面
function showPage(p) {
// 步骤1 - 隐藏所有页面
pageArr = document.getElementsByClassName("page");
for (let i = 0; i < pageArr.length; i++) {
let page = pageArr[i];
page.style.display = "none";
}
// 步骤2 - 显示所选页面
document.getElementById("page" + p).style.display = "block";
// 步骤3 - 使所有导航栏按钮无效
let btnArr = document.getElementsByClassName("navbar-btn");
for (let i = 0; i < btnArr.length; i++) {
let btn = btnArr[i];
btn.classList.remove("active");
}
// 步骤4 - 使具有类别nav+p的导航栏按钮激活
btnArr = document.getElementsByClassName("nav" + p);
for (let i = 0; i < btnArr.length; i++) {
let btn = btnArr[i];
btn.classList.add("active");
}
}
/* ----- ----- */
// 初始化函数。在这里，我们可以放置需要初始化原型的代码。
function initPrototype() {
// 例如，当使用声音或传感器时，这变得很重要。
console.log("==> 原型初始化开始。");
// 显示起始页/着陆页
showPage(1);
}
</script>
</head>
<body onload="showPage(0);">
<!-- Page0 is needed for initPrototype() function. DON'T REMOVE! -->
<!-- Page0 is needed for initPrototype() function. DON'T REMOVE! -->
<div id="page0" class="page">
<div class="prototype-start-page">
<button class="btn btn-success" type="button" onclick="initPrototype();">开始原型</button>
</div>
</div>
<!-- Page0 is needed for initPrototype() function. DON'T REMOVE! -->
<!-- Page0 is needed for initPrototype() function. DON'T REMOVE! -->
<!-- 所有页面 -->
<!-- 新页面必须具有类别'page'和ID 'pageX'，其中X必须是页面的唯一编号，并具有HTML结构： -->
<!--
<div id="pageX" class="page">
新页面的HTML内容。不要忘记包含菜单。
</div>
-->
<!-- 在示例中，我们有三个原型应用程序的页面，page1、page2和page3，所以下一页自然应该是page4： -->
<!--
<div id="page4" class="page">
新页面的HTML内容。不要忘记包含菜单并添加第4个菜单选项。
</div>
-->
<!-- 为了使处理页面导航的JavaScript正常工作，菜单按钮必须具有类别'navbar-btn'和'navX'，其中X是菜单按钮打开的页面的编号。我们还必须通过将'4'作为showPage()函数的参数来指定要打开的页面编号。例如，要添加一个菜单按钮以打开'page4'，我们将创建以下按钮： -->
<!--
<button class="nav4 nav3 btn navbar-btn btn-primary" type="button" onclick="showPage(4);">转到页面4</button>
-->
<!-- 类别navbar__btn--active包含活动菜单选项的样式。 -->
<!-- 页面1 -->
<div id="page1" class="page">
<!-- 顶部栏 -->
<div class="top-app-bar">
<div>
<i class="icon-mob-size" data-feather="home" onclick="showPage(1)"></i>
<span class="top-nav-headline">StrindbergAppen</span>
</div>
</div>
<!-- 导航栏 -->
<nav class="navbar fixed-bottom navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</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">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">StrindbergAppen</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bilder på August Strindberg</a>
</li>
<li class="nav-item">
<
<details>
<summary>英文:</summary>
I used to work with an earlier version of Bootstrap but am trying to get into the current version 5.3.0. I'm using template code which I've updated to current Bootstrap version.
I'm currently trying to get the navbar working but it only does half-way; In small-screen I can expand the navbar, but the toggler button doesn't work when I want to collapse the navbar again. I've been up and down the code but feel kind of snowblind as I can't see what's wrong.
<!DOCTYPE html>
<html lang="en">
<head>
<title>StrindbergAppen</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Laddar extern styling -->
<link rel="stylesheet" type="text/css" href="./css/style.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Laddar script för att få tillgång till ikoner för menyknapparna -->
<script src="https://unpkg.com/feather-icons"></script>
<script>
/* ----- Javascript for SPA - Single Page Application logic ----- */
// Help function that shows page with id page+p and hides all other pages
function showPage(p) {
// Step 1 - Hide all pages
pageArr = document.getElementsByClassName("page");
for (let i = 0; i < pageArr.length; i++) {
let page = pageArr[i];
page.style.display = "none";
}
// Step 2 - Show the selected page
document.getElementById("page" + p).style.display = "block";
// Step 3 - Make all navbar buttons inactive
let btnArr = document.getElementsByClassName("navbar-btn");
for (let i = 0; i < btnArr.length; i++) {
let btn = btnArr[i];
btn.classList.remove("active");
}
// Step 4 - Make page all navbar buttons with class nav+p active
btnArr = document.getElementsByClassName("nav" + p);
for (let i = 0; i < btnArr.length; i++) {
let btn = btnArr[i];
btn.classList.add("active");
}
}
/* ----- ----- */
// Init function. Here we can put code that is needed to initialize our prototype.
function initPrototype() {
// For example, when using sound or sensors this becomes important.
console.log("==> Prototype init started.");
// Show the landingpage/startpage
showPage(1);
}
</script>
</head>
<body onload="showPage(0);">
<!-- Page0 is needed for initPrototype() function. DON'T REMOVE! -->
<!-- Page0 is needed for initPrototype() function. DON'T REMOVE! -->
<div id="page0" class="page">
<div class="prototype-start-page">
<button class="btn btn-success" type="button" onclick="initPrototype();">Start prototype</button>
</div>
</div>
<!-- Page0 is needed for initPrototype() function. DON'T REMOVE! -->
<!-- Page0 is needed for initPrototype() function. DON'T REMOVE! -->
<!-- alla sidor -->
<!-- Nya sidor måste ha klassen 'page' och ett id 'pageX', där X måste vara ett unikt nummer på sidan,
och ha HTML-strukturen:
<div id="pageX" class="page">
Nya sidans HTML-innehåll. Glöm inte att ta med menyn.
</div>
I exemplet har vi tre sidor för app-prototypen, page1, page2 och page3, så en naturlig nästa sida vore page4:
<div id="page4" class="page">
Nya sidans HTML-innehåll. Glöm inte att ta med menyn och lägga till ett 4e menyalternativ.
</div>
För att javascriptet som sköter sidnavigeringen skall fungera krävas att meny-knapparna har klasserna
'navbar-btn' och 'navX', där X är nummret för sidan som meny-knappen öppnar. Vi måste också ange nummret
på sidan som skall öppnas av meny-knappen genom att använda '4' som parameter till funktionen 'showPage();'
T ex, för att lägga till en meny-knapp för 'page4' så skulle vi skapa följande knapp:
<button class="nav4 nav3 btn navbar-btn btn-primary" type="button" onclick="showPage(4);">Go to page 4</button>
Klassen navbar__btn--active innehåller stylingen för det menyalternativ som är aktivt.
-->
<div id="page1" class="page">
<!-- Top bar -->
<div class="top-app-bar">
<div>
<i class="icon-mob-size" data-feather="home" onclick="showPage(1)">
</i>
<span class="top-nav-headline">StrindbergAppen</span>
</div>
</div>
<!-- Navbar -->
<nav class="navbar fixed-bottom navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</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">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">StrindbergAppen</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bilder på August Strindberg</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Betygsätt Strindberg</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Om Strindbergappen</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End of Navbar! -->
<div>
<!-- page content -->
<h1>August Strindberg</h1>
<picture>
<source media="(min-width: 800px)" srcset="./img/hero/hero_medium.jpg">
<source media="(min-width: 1280px)" srcset="./img/hero/hero_large.jpg">
<img src="./img/hero/hero_small.jpg" alt="Gatubild från sekelskiftets Stockholm" style="width:100%;">
</picture>
<div class="container">
<h2>Biografi</h2>
<picture class="left-align">
<source media="(min-width: 800px)" srcset="./img/poet/poet_250x500.jpg, ./img/poet/poet_250x500@2.jpg 2x">
<source media="(min-width: 375px)" srcset="./img/poet/poet_125x250.jpg, ./img/poet/poet_250x500.jpg 2x">
<img class="left-align" src="./img/poet/poet_250x500.jpg" alt="August Strindberg by Robert Roesler, circa 1881">
</picture>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime saepe praesentium error placeat ullam tempore
magni enim, debitis aliquam mollitia similique ipsa ipsum sunt ratione natus expedita cumque repellendus
provident?
Tempore itaque nostrum eligendi deleniti dolores ipsam repudiandae ipsum culpa exercitationem harum.
Distinctio aliquam ducimus illo modi nihil quis minus ullam rerum sapiente doloribus! Fugit, provident?
Voluptate nemo excepturi ducimus.
Corrupti accusantium perspiciatis ducimus vitae similique deserunt repellendus laudantium numquam velit
excepturi quidem, molestiae quos, eveniet ut. Unde consequatur ad repellat, natus maiores recusandae facilis
laboriosam doloremque maxime eveniet aliquid?
Aperiam voluptates quibusdam delectus quasi cum nobis nostrum ratione architecto fugiat exercitationem?
Animi aliquid, quaerat placeat voluptatem tempore mollitia assumenda eaque quae officiis amet tempora,
reprehenderit cumque? Quod, quasi accusantium.
Debitis tenetur atque temporibus ratione totam optio, illum officia provident eos repellat accusamus
excepturi maxime veniam neque nobis odio inventore sit laborum, dolorum perspiciatis. Eligendi non
architecto repellat inventore nam.
</p>
</div>
</div>
</div>
<div id="page2" class="page">
<!-- navbar -->
<nav class="navbar">
<button class="nav1 navbar-btn btn btn-primary active" type="button" onclick="showPage(1);">Go to page 1</button>
<button class="nav2 navbar-btn btn btn-primary" type="button" onclick="showPage(2);">Go to page2</button>
<button class="nav3 navbar-btn btn btn-primary" type="button" onclick="showPage(3);">Go to page3</button>
</nav>
<!-- page content -->
<h1>Example page 2</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium maxime expedita culpa? Nostrum
perspiciatis perferendis dolore atque fuga inventore blanditiis! Minus mollitia dolorum nesciunt in magni
necessitatibus minima porro officia.
Corrupti fuga maiores aut eligendi id quasi necessitatibus. A nihil, repellendus quia dolores magnam
temporibus cum molestiae debitis. Eveniet, dolor voluptates? Officiis rerum aliquid repellendus quia dolore
omnis optio cum.
Beatae illum est et sint hic magnam, dignissimos quos excepturi nihil harum minus deserunt odio deleniti
praesentium eum adipisci fuga sequi porro, dolore cupiditate eligendi rerum distinctio reiciendis?
Blanditiis, incidunt.
</p>
</div>
<div id="page3" class="page">
<!-- navbar -->
<nav class="navbar">
<button class="nav1 navbar-btn btn btn-primary active" type="button" onclick="showPage(1);">Go to page 1</button>
<button class="nav2 navbar-btn btn btn-primary" type="button" onclick="showPage(2);">Go to page2</button>
<button class="nav3 navbar-btn btn btn-primary" type="button" onclick="showPage(3);">Go to page3</button>
</nav>
<!-- page content -->
<h1>Example page 3</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestiae explicabo tempora ullam cumque, obcaecati
aut sed inventore excepturi, voluptatibus ratione laborum incidunt quod. Cum quis eos adipisci consequatur
ipsa. Sed!
Voluptatum voluptas sunt tenetur porro maiores veritatis, ipsam libero? Nesciunt ea quas iusto ducimus
suscipit eos quibusdam. Doloremque cum fugiat, tempora qui temporibus delectus. Fuga quaerat accusamus non
iusto delectus.
Esse a sit et nobis ducimus sint, porro, quod accusamus exercitationem voluptatum placeat sed. Soluta,
blanditiis aliquam consectetur rem aliquid itaque tempore ea corporis recusandae? Dignissimos sit expedita
commodi quibusdam.
Illo voluptates culpa assumenda recusandae explicabo ab pariatur? Temporibus qui dolorum expedita culpa
animi eligendi pariatur fuga dolorem ipsum, alias hic unde, nulla tenetur odio saepe enim aut ratione
laboriosam!
</p>
</div>
<script>
feather.replace()
</script>
</body>
</html>
</details>
# 答案1
**得分**: 1
**编辑**：看起来你不需要将它放在正文中，但是你有相同的行两次是导致问题的原因。删除指定的行将解决你的问题。
我已经解决了你的问题。你没有正确实现Bootstrap 5。你有两个这样的行：`<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>`。都删除掉，但将这行保存到你的剪贴板。然后粘贴一个**在body内**。
根据getbootstrap.com上的文档，脚本应该放在**body**的末尾，而不是**head**中。
移动那行后它将起作用。
<details>
<summary>英文:</summary>
...............................
**Edit**: Looks like you don't need to have it in the body, but the fact that you have the same line twice is what is giving you the issue. Deleting the specified line will solve your issue.
...............................
I have solved your problem. You are not implementing Bootstrap 5 properly. You have two instances of this line: `<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>`. Delete them both but save the line to your clipboard. Then paste one **inside of the body**.
According to the documentation at getbootstrap.com, the script should be at the end of the **body**, *not* in **head**.
It will work after you move that line.
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论