我正在尝试创建一个没有静态站点模板/构建器的 github 页面站点。我想将导航放在一个单独的文件中，这样如果我进行更改，我不需要将它们复制到所有其他 html 文件中。我已经让 jQuery 来做到这一点，但与我将导航栏放在 index.html 中相比，它弄乱了布局，我不明白为什么。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="/CSS/styles.css" media="all">
<title>Soup's website</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- jquery library -->
</head>
<body>
<div id="nav-placeholder"></div>
<div class="header">
<t>header</t>
</div>
<div class="row">
<div class="column side" style="background-color:#bbb;">Column right</div>
<div class="column middle" style="background-color:#ccc;">Column mid</div>
</div>
<div class="footer">
<t>footer</t>
</div>
<script>
$(function(){
$("#nav-placeholder").load("nav.html");
});
</script>
<script src="/Javascript/customscript.js"></script>
</body>
</html>
nav.html
<nav class="navbar">
<div class="hamburger" onclick="toggleMenu()">
☰ <!-- (three horizontal lines) -->
</div>
<ul class="menu">
<li><a href="/index.html">Home</a></li>
<li><a href="/projects/index.html">Projects</a></li>
<li><a href="/template.html">template</a></li>
</ul>
</nav>
自定义脚本.js
// Function to toggle the dropdown menu on mobile
function toggleMenu() {
const menu = document.querySelector('.menu');
menu.classList.toggle('show');
}
样式.css
/* default css */
body {
font-family: Arial, sans-serif;
font-size: 20px;
background-color: #b90000;
display:grid;
min-height: 100vh; /* always fill fiewport */
grid-template-rows: auto 1fr auto;
padding: 0;
margin: 0;
box-sizing: border-box; /* this probably makes it harder but will be a pain to change */
}
.header {
background-color: #f1f1f1;
margin-top: 65px; /* to accomodate navbar */
padding: 3px; /* to visually balance navbar shadow */
text-align: center;
}
.footer {
background-color: #f1f1f1;
position: relative;
bottom: 0;
text-align: center;
}
/*Navbar*//*#region*/
.navbar {
position: fixed; /* to viewport, need to add margin-top to header to accomodate */
top: 0;
left: 0;
width: 100%;
min-height:65px; /* needs to accomodate mobile dropdown */
background-color: #091c38;
box-shadow: 0px 2px 2px 1px rgb(16, 191, 214); /* x y blur spread */
display: flex;
justify-content: start;
z-index: 1000; /*display order*/
}
/* Menu that will be put in navbar */
.menu {
list-style-type: none; /* no list bullet points */
margin: 0;
padding: 10px;
display: flex;
justify-content: center;
}
/*menu list items*/
.menu li {
padding: 10px 20px;
}
/*menu links/text*/
.menu a {
font-size: 20px;
color: white;
text-decoration: none; /* no link underlines */
}
/*menu links/text hover*/
.menu a:hover {
color: #30fcfc;
outline: rgb(16, 191, 214) solid 5px;
outline-offset: 5px;
border-radius: 2%;
}
/* Hamburger dropdown Icon */
.hamburger {
display: none; /* Hide the hamburger icon by default */
cursor: pointer; /* change pointer when hovering */
font-size: 43px;
color: rgb(255, 255, 255);
top: 0;
left: 12px;
position: fixed; /* DO NOT MESS WITH THE BORGER IT WILL BORK THE ENTIRE NAV BAR */
z-index: 1001; /* Make sure the hamburger stays on top of other content */
}
/*#endregion*/
/*content columns*//*#region*/
.column {
float: right;
}
/* Left and right column */
.column.side {
width: 25%;
}
.column.middle {
width: 75%;
}
/* Clear floats after the columns dunno if this does anything
.row:after {
content: "";
display: table;
clear: both;
}*/
/*#endregion*/
/* Mobile-specific changes *//*#region*/
@media (max-width: 600px) {
/* Hide the menu by default on mobile and switch direction for dropdown*/
.menu {
display: none;
flex-direction: column;
width: 100%;
}
/* Show the hamburger icon on small screens */
.hamburger {
display:block;
}
/* Show menu dropdown when the "show" class is added by script*/
.menu.show {
display: flex;
}
/* mobile menu list items settings*/
.menu li {
padding-left: 0px;
width: 100%; /* Make menu items take full width */
text-align: center; /* Center the text */
}
/* make content colums full width so they stack instead */
.column.side, .column.middle {
width: 100%;
}
}
/*#endregion*/
行类（内容列）不是放置在标题正下方，而是放置在页面底部。我主要是尝试通过不同的方法来做到这一点，而不是修改 css
当使用不带后缀选择器表达式的 URL 调用
时，内容会在删除脚本之前传递到.load()。这会在脚本块被丢弃之前执行它们。但是，如果使用附加到 URL 的选择器表达式来调用.html()，则脚本会在 DOM 更新之前被删除，因此不会被执行。.load()
我会为您的 customscript.js 文件提供以下建议。
// Function to toggle the dropdown menu on mobile
function toggleMenu() {
$('.menu').toggleClass('show');
}
$("body").on("click", "div.hamburger", toggleMenu);
当提供
时，事件处理程序称为 deleerated。当事件直接发生在绑定元素上时，不会调用处理程序，而是仅针对与选择器匹配的后代（内部元素）调用处理程序。 jQuery 将事件从事件目标冒泡到附加处理程序的元素（即，最内层到最外层元素），并为沿该路径匹配选择器的任何元素运行处理程序。selector
事件处理程序仅绑定到当前选定的元素；它们在您的代码调用
时必须存在。为了确保元素存在并且可以选择，请将脚本放置在 HTML 标记中的元素后面，或者在文档就绪处理程序中执行事件绑定。或者，使用委托事件处理程序来附加事件处理程序。.on()