英文:
Bootstrap 5.3.0 - Navigation bar expanding but not collapsing on index.html
问题
我尝试制作一个响应式导航栏，当我点击汉堡按钮时，导航栏会展开，但再次点击它不会使导航栏收缩。我已经搜索过类似的问题并尝试了一些解决方案，但没有解决。
我使用的是Bootstrap 5.3.0。当我指向navbar.html时，它可以正常工作，但在index.html上不行。我在浏览器中检查发现，在第一次点击时，collapse会变成collapse show并展开导航栏，在第二次点击时它显示collapsing，然后再次变为collapse show。
英文:
I'm trying to make a responsive navigation bar, when I click on the hamburger button the navigation bar expands but clicking on it again doesn't make the navigation bar to collapse. I have searched for the same and tried some solutions but it didn't got fixed.
I'm using bootstrap 5.3.0. When i point to navbar.html, it works fine, but on the index.html it doesn't. I inspected in browser and found that collapse changes to collapse show upon first click and expands the navbar, on second click it shows collapsing and again changes to collapse show.
Here's my navbar.html:
<!DOCTYPE html>
<html lang="en" dir="ltr" data-bs-theme="dark">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
<title>Demosite</title>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand ps-1" href="#">Brand Name</a>
<button id=collapseButton class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" href="#">Link 1</a>
<a class="nav-link" href="#">Link 2</a>
<a class="nav-link" href="#">Link 3</a>
<a class="nav-link" href="#">Link 4</a>
<a class="nav-link" href="#">Link 5</a>
<a class="nav-link" href="#">Link 6</a>
</div>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>
Here is my index.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
<title>Demosite</title>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="navbar.js"></script>
</head>
<body>
<div id="navbar"></div>
<div class="container mt-5">
<h1>Demo Home Page</h1>
<p>Hello! Welcome to homepage.</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>
and my javascript:
$(function(){
$("#navbar").load("navbar.html");
});
答案1
得分: 0
<html> HTML元素表示HTML文档的根（顶级元素），因此它也被称为根元素。所有其他元素必须是这个元素的后代。
来源：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html
<body> HTML元素表示HTML文档的内容。一个文档中只能有一个<body>元素。
来源：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body
因此，如果您将HTML加载到现有的HTML文档中，那么加载的HTML必须不包含这些元素，因为它们已经存在于您的index.html文档中（因此最终会成为主index.html文件中不允许的子元素）。
简而言之，将您的navbar.html文件保存以下内容：
<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand ps-1" href="#">Brand Name</a>
<button id=collapseButton class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" href="#">Link 1</a>
<a class="nav-link" href="#">Link 2</a>
<a class="nav-link" href="#">Link 3</a>
<a class="nav-link" href="#">Link 4</a>
<a class="nav-link" href="#">Link 5</a>
<a class="nav-link" href="#">Link 6</a>
</div>
</div>
</div>
</nav>
英文:
The <html> HTML element represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element.
Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html
The <body> HTML element represents the content of an HTML document. There can be only one <body> element in a document.
Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body
Therefore, if you are loading HTML into an existing HTML document, that loaded HTML must not contain these elements as they already exist in your index.html document (and would therefore end up as non-permitted children elements within your main index.html file).
In short, save your navbar.html file with the following contents:
<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand ps-1" href="#">Brand Name</a>
<button id=collapseButton class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" href="#">Link 1</a>
<a class="nav-link" href="#">Link 2</a>
<a class="nav-link" href="#">Link 3</a>
<a class="nav-link" href="#">Link 4</a>
<a class="nav-link" href="#">Link 5</a>
<a class="nav-link" href="#">Link 6</a>
</div>
</div>
</div>
</nav>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论