Javascript 手机上出现字体可怕图标下拉列表

我的下拉菜单工作得很好，直到我在导航栏上添加了字体很棒的图标。在我添加了burger×图标来代表我的菜单后，它在手机和桌面上都停止了工作

在第一个问题之后，我尝试更改我的JS和调用我的JS函数的元素；我设法让它在桌面上工作，但手机还是坏了

问题：
对于移动设备，当我点击汉堡图标时，什么也没发生
对于桌面，当我点击汉堡/十字架图标时，它工作正常

我试图在下面的片段中重现这个问题
不幸的是，我无法重新创建该问题，因此我只添加了一个指向测试站点的链接

我的问题：如何使用字体图标作为手机按钮

主页是唯一添加了图标的页面，请使用它来显示问题。

链接到测试站点：

函数下拉列表（）{
“严格使用”；
var getBurg=document.getElementById（'burg'）；
var getCross=document.getElementById（'cross'）；
var nav_items=document.getElementsByClassName（'nav-item'）；
var nav_list=document.getElementById（'navList'）；
如果（getBurg.style.display=='none'）{
getBurg.style.display='block'；
getCross.style.display='none'；
nav_list.style.display='none'；
对于（变量i=0；i

。固定导航{
字体大小：粗体；
排名：0；
左：0；
宽度：100%；
字体大小：.8em；
位置：固定；
高度：50px；
框大小：边框框；
文本对齐：居中；
盒影：0px 3px 6px rgba（0,0,0,0.16），0px 3px 6px rgba（0,0,0,0.23）；
z指数：1；
}
.固定导航{
填充：0；
列表样式类型：无；
列表样式图像：无；
利润上限：-3px；
}
.固定导航李{
框大小：边框框；
}
.固定导航李：悬停{
显示：块；
}
.固定导航ul li a{
文字装饰：无；
边际：0px；
}
.固定导航ul li a:悬停{}
.固定导航a{
文字装饰：无；
}
#伯格{
背景：无；
位置：绝对位置；
排名：0；
右：0；
线高：45px；
填充：2x15px 0 15px；
边界：0；
垂直对齐：中间对齐；
字体大小：30px；
字体大小：粗体；
光标：指针；
大纲：无；
}
#交叉{
背景：无；
位置：绝对位置；
顶部：0px；
右：0px；
填充：8px 15px 0px 15px；
字体大小：30px；
边界：0；
字体大小：粗体；
光标：指针；
大纲：无；
显示：无；
}
.导航项目{
位置：相对位置；
高度：70像素；
宽度：100%；
显示：无；
字体大小：20px；
光标：指针；
}
.资产净值项目a{
显示：块；
身高：100%；
}
.导航项目：悬停{
背景色：#DFDFDF；
}
.导航项目：悬停a{
文字装饰：无；
}
#导航列表{
边缘顶部：50px；
高度：100vh；
显示：无；
}

我希望这对您有用，我一直在使用FA图标作为按钮，将它们引入另一个元素（如div或link）中，然后使用JavaScript使其作为按钮工作。例如：

<div id="button">
  <i class="fas fa-sort-down"></i>
</div>

<script>
 $(document).ready(() => {
   $('#button').click(//anything you want);
 });
</script>

$（文档）.ready（（）=>{
$（“#按钮”）。单击（//任何您想要的内容）；
});

还可以在div中使用onClick属性：

<div id="button" onClick="">
  <i class="fas fa-sort-down"></i>
</div>

---

希望这可以帮助你，我从来没有一个错误，或没有工作，无论是移动或桌面使用FA图标像这样

谢谢你的回复！我一有时间就测试一下。我会让你知道它是否有效。