Javascript 标题切换未显示，我可以'；t展开菜单

这是我的html，css和js代码下面的侧栏菜单在引导。问题是标题切换和任何其他图标都没有显示在菜单上，因此我无法展开菜单。我从方框图标使用的所有图标也没有显示（也是我导入的），是否有办法解决此问题？ 提前谢谢

document.addEventListener（“DOMContentLoaded”），函数（事件）{
const showNavbar=（切换ID、navId、bodyId、headerId）=>{
const toggle=document.getElementById（toggleId），
nav=document.getElementById（navId），
bodypd=document.getElementById（bodyId），
headerpd=document.getElementById（headerId）
//验证所有变量是否存在
if（切换和导航和车身PD和头部PD）{
toggle.addEventListener（'click'，（）=>{
//显示导航栏
nav.classList.toggle（'show'）
//更改图标
toggle.classList.toggle（'bx-x'）
//在主体上添加填充物
body-pd.classList.toggle（'body-pd'）
//在标题中添加填充
headerpd.classList.toggle（'body-pd'）
})
}
}
showNavbar（'header-toggle'、'nav-bar'、'body-pd'、'header'）
/*====链接处于活动状态=====*/
const linkColor=document.queryselectoral（“.nav_link”）
函数colorLink（）{
如果（链接颜色）{
linkColor.forEach（l=>l.classList.remove（'active'））
this.classList.add（'active'）
}
}
linkColor.forEach（l=>l.addEventListener（'click'，colorLink））
//自DOM加载并准备就绪后要运行的代码
});
@导入url（“https://fonts.googleapis.com/css2?family=Nunito:wght@400；600；700&display=swap”）；
：根{
--收割台高度：3rem；
--导航宽度：68像素；
--第一种颜色：#4723D9；
--第一色光：#AFA5D9；
--白色：#F7F6FB；
--正文字体：“Nunito”，无衬线；
--正常字号：1rem；
--z固定：100
}
*,
：：之前，
：：之后{
框大小：边框框
}
身体{
位置：相对位置；
边距：var（--收割台高度）0；
填充：0 1rem；
字体系列：var（--正文字体）；
字体大小：var（--正常字体大小）；
转换：.5s
}
a{
文本装饰：无
}
.标题{
宽度：100%；
高度：var（--收割台高度）；
位置：固定；
排名：0；
左：0；
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
填充：0 1rem；
背景色：var（--白色）；
z指数：var（--z-固定）；
转换：.5s
}
.header_切换{
颜色：var（--第一种颜色）；
字体大小：1.5rem；
光标：指针
}
.header\u img{
宽度：35px；
高度：35px；
显示器：flex；
证明内容：中心；
边界半径：50%；
溢出：隐藏
}
.header\u img img{
宽度：40px
}
.l-navbar{
位置：固定；
排名：0；
左-30%；
宽度：var（--导航宽度）；
高度：100vh；
背景色：var（--第一色）；
填充：.5rem 1rem 0；
过渡：.5s；
z指数：var（--z-固定）
}
.导航{
身高：100%；
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
溢出：隐藏
}
.nav_标志，
.导航链接{
显示：网格；
网格模板列：最大内容最大内容；
对齐项目：居中；
柱间距：1rem；
填充：.5rem 0.5rem 1.5rem
}
.nav_标志{
保证金底部：2rem
}
.nav_标志-图标{
字体大小：1.25rem；
颜色：var（--白色）
}
.nav_徽标名称{
颜色：var（--白色）；
字号：700
}
.导航链接{
位置：相对位置；
颜色：var（--第一色光）；
保证金底部：1.5雷姆；
转换：.3s
}
.nav_链接：悬停{
颜色：var（--白色）
}
.导航图标{
字号：1.25rem
}
.表演{
左：0
}
.身体疾病{
左侧填充：计算（var（--导航宽度）+1rem）
}
.主动{
颜色：var（--白色）
}
.活动：：之前{
内容：''；
位置：绝对位置；
左：0；
宽度：2倍；
高度：32px；
背景色：var（--白色）
}
.身高-100{
高度：100vh
}
@媒体屏幕和屏幕（最小宽度：768px）{
身体{
裕度：计算（var（--收割台高度）+1rem）0；
左侧填充：计算（var（--导航宽度）+2rem）
}
.标题{
高度：计算值（var（--收割台高度）+1rem）；
填充：0 2rem 0计算（变量（--导航宽度）+2rem）
}
.header\u img{
宽度：40px；
高度：40px
}
.header\u img img{
宽度：45像素
}
.l-navbar{
左：0；
填充：1rem 1rem 0 0
}
.表演{
宽度：计算（var（--nav宽度）+156px）
}
.身体疾病{
左侧填充：计算（var（--nav宽度）+188px）
}
}

主要成分
您可以在头标签中保留以下代码。从官方网页中找到此cdn链接

<link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>



这对我很有用
用这个更改引导cdn

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">

必须工作

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0px;
}