Javascript 可点击下拉菜单中的可点击字体图标

我使用两个没有任何文本的图标作为可点击的下拉菜单，但是这些图标不会切换下拉菜单。当我点击他们周围的填充物时，下拉菜单起作用。正如您在W3schools示例中所看到的，单击文本和填充可以正常工作，但单击图标无效。我怎样才能解决这个问题

/*当用户单击按钮时，
在隐藏和显示下拉内容之间切换*/
函数myFunction（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
//如果用户在下拉列表之外单击，请关闭下拉列表
window.onclick=函数（e）{
如果（！e.target.matches（'.dropbtn'））{
var myDropdown=document.getElementById（“myDropdown”）；
if（myDropdown.classList.contains（'show'））{
myDropdown.classList.remove（'show'）；
}
}
}

.navbar{
溢出：隐藏；
背景色：#333；
字体系列：Arial、Helvetica、无衬线字体；
}
纳瓦尔先生{
浮动：左；
字体大小：16px；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
.下拉列表{
浮动：左；
溢出：隐藏；
}
.下拉菜单{
光标：指针；
字体大小：16px；
边界：无；
大纲：无；
颜色：白色；
填充：14px 16px；
背景色：继承；
字体家族：继承；
保证金：0；
}
.导航栏a:悬停，
.dropdown:hover.dropbtn，
.dropbtn:焦点{
背景色：红色；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
浮动：无；
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
.下拉列表内容a：悬停{
背景色：#ddd；
}
.表演{
显示：块；
}

下拉列表

您可以向函数中添加

.fa

代码：

小提琴：

/*当用户单击按钮时，
在隐藏和显示下拉内容之间切换*/
函数myFunction（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
//如果用户在下拉列表之外单击，请关闭下拉列表
window.onclick=函数（e）{
如果（！e.target.matches（'.dropbtn.fa'））{
var myDropdown=document.getElementById（“myDropdown”）；
if（myDropdown.classList.contains（'show'））{
myDropdown.classList.remove（'show'）；
}
}
}

.navbar{
溢出：隐藏；
背景色：#333；
字体系列：Arial、Helvetica、无衬线字体；
}
纳瓦尔先生{
浮动：左；
字体大小：16px；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
.下拉列表{
浮动：左；
溢出：隐藏；
}
.下拉菜单{
光标：指针；
字体大小：16px；
边界：无；
大纲：无；
颜色：白色；
填充：14px 16px；
背景色：继承；
字体家族：继承；
保证金：0；
}
.导航栏a:悬停，
.dropdown:hover.dropbtn，
.dropbtn:焦点{
背景色：红色；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
浮动：无；
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
.下拉列表内容a：悬停{
背景色：#ddd；
}
.表演{
显示：块；
}

下拉列表

可能类似于为我们需要的元素添加一个新类，以逃避关闭单击：-

/*当用户单击按钮时，
在隐藏和显示下拉内容之间切换*/
函数myFunction（）{document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
//如果用户在下拉列表之外单击，请关闭下拉列表
window.onclick=函数（e）{
如果（！e.target.matches（'.esc'））{
var myDropdown=document.getElementById（“myDropdown”）；
if（myDropdown.classList.contains（'show'））{
myDropdown.classList.remove（'show'）；
}
}
}

.navbar{
溢出：隐藏；
背景色：#333；
字体系列：Arial、Helvetica、无衬线字体；
}
纳瓦尔先生{
浮动：左；
字体大小：16px；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
.下拉列表{
浮动：左；
溢出：隐藏；
}
.下拉菜单{
光标：指针；
字体大小：16px；
边界：无；
大纲：无；
颜色：白色；
填充：14px 16px；
背景色：继承；
字体家族：继承；
保证金：0；
}
.navbar a:悬停，.dropdown:悬停.dropbtn，.dropbtn:焦点{
背景色：红色；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
浮动：无；
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
.下拉列表内容a：悬停{
背景色：#ddd；
}
.表演{
显示：块；
}

下拉列表

这是可行的，但我对.fas图标有一些奇怪的问题，图标的某些区域是可点击的，有些区域不是。。。我真的很困惑。我正在使用这两个：.fas、.fa globe americas、.fa chevron下面有一个可能有用的东西：可惜没有用。我刚刚意识到，当我点击图标的空白部分时，下拉菜单会切换，但当我点击实际的颜色/图标时，它不会。奇怪的是，任何地方都有实时版本吗？尝试使用

span

标记？即使FA建议

i

// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
  if (!e.target.matches('.dropbtn, .fa')) {
    var myDropdown = document.getElementById("myDropdown");
    if (myDropdown.classList.contains('show')) {
      myDropdown.classList.remove('show');
    }
  }
}