建议将代码拆分为多个HTML/JS文件

Question

我想把我的代码分割成多个文件。我刚刚完成垂直菜单，目前它在index.html。我要创建一个名为Menu的文件夹在menu.html和menu.js.中，我只使用HTML/JS和CSS

menu.js

<div class="menu-btn">
<i class="fas fa-bars"></i>
</div>
<div class="side-bar">
<header>
<div class="close-btn">
<i class="fas fa-times"></i>
</div>
<img
src="#"
alt="Logo"
/>
<h1>Logo</h1>
<div class="menu">
<div class="item">
<a href="#"><i class="fas fa-desktop"></i>Dashboard</a>
<div class="item">
<a class="sub-btn"
><i class="fas fa-table"></i>Matematika<i
class="fas fa-angle-right dropdown"
></i
></a>
<div class="sub-menu">
<a href="/pages/matematika1.html" class="sub-item"
>Matematika#1</a
>
<a href="" class="sub-item">Matematika#2</a>
<a href="" class="sub-item">Matematika#3</a>
</div>
</div>
<div class="item">
<a href="#"><i class="fas fa-th"></i>Forms</a>
</div>
<div class="item"></div>
</div>
</div>
</header>
</div>

menu.js

$(document).ready(function () {
//jquery for toggle sub menus
$(".sub-btn").click(function () {
$(this).next(".sub-menu").slideToggle();
$(this).find(".dropdown").toggleClass("rotate");
});
//jquery for expand and collapse the sidebar
$(".menu-btn").click(function () {
$(".side-bar").addClass("active");
$(".menu-btn").css("visibility", "hidden");
});
$(".close-btn").click(function () {
$(".side-bar").removeClass("active");
$(".menu-btn").css("visibility", "visible");
});
});

也第一步是必要的导入脚本文件到html文件。我可以通过<script src="menu.js" type="module"></script>

第二步i必须以某种方式在index.html中包含menu.html。我尝试了一些jquery。加载函数但我认为一定有比使用Jquery更简单的东西。我也试过manuel by jotform，但我没有足够的技能来理解，因为它不适合我

最好

Answer 1

如果你不使用任何框架，你最好使用web组件来分割你的代码。