Javascript-点击图标显示下拉菜单

我试图在点击图标时显示下拉菜单。此时，单击包装在带有onclick函数的

锚定

标记内的图标时，不会发生第一个示例中所示的任何情况

我试图通过在onclick锚定标签中输入文本来解决这个问题，该标签上写着

下载报告

。单击文本时，下拉菜单会按预期显示，但如果我要在右侧显示图标，则下拉菜单不会出现

如何使下拉菜单在单击图标而不是文本时显示

以下是我的代码示例：

函数myFunction（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
函数myFunction（）{
document.getElementById（“myDropdown2”）.classList.toggle（“show”）；
}
//如果用户在下拉菜单外单击，请关闭下拉菜单
window.onclick=函数（事件）{
如果（！event.target.matches（'.dropbtn'））{
var dropdowns=document.getElementsByClassName（“下拉下载”）；
var i；
对于（i=0；i

a{
光标：指针；
}
下载btn容器{
显示：内联块；
浮动：对；
}
下载btn容器a{
字号：700；
字母间距：.5px；
颜色：#c94927；
}
/*下拉内容（默认情况下隐藏）*/
.下拉下载{
显示：无；
位置：绝对位置；
背景色：#f1f1；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
/*下拉列表中的链接*/
.下拉下载{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
/*更改悬停时下拉链接的颜色*/
.下拉下载a:悬停{
背景色：#ddd
}
/*显示下拉菜单（当用户单击下拉按钮时，使用JS将此类添加到.dropdown内容容器）*/
.表演{
显示：块；
}

下载列表

我稍微重新构造了javascript，从HTML中删除了onclick属性，并添加了一个可以在forEach循环中运行的函数。不要在两个按钮上添加相同的命名函数

myFunction（）

，而是使用

querySelectorAll

查询按钮元素，并通过循环运行节点列表。运行使用事件的函数。以父元素为目标查找下拉元素，然后使用事件侦听器切换该元素的

show

类单击

您可以使用：

e.target.parentNode.nextElementSibling.classList.toggle（'show'）

event.target

（这是你的图标）=>

。parentNode

=>（这是你的.dropbtn类）=>

。nextementsibling

（。下拉下载-这是你的隐藏元素）=>

。类列表。切换（切换（
）切换类
。显示
）

注意：另外，不确定您是否打算在a标签中包含第二个
下载列表
，而不是第一个。如果是这样的话，代码将需要一个额外的条件来运行，正如我所说的那样


let btns=document.queryselectoral（'.dropbtn'））
//这将返回一个nodeList，该nodeList可以使用forEach方法在节点列表上循环
//简单的单行函数，用于获取事件目标父级和NextElementssiling
函数showDrpDown（e）{
e、 target.parentNode.nextElementSibling.classList.toggle（'show'）命令
}
//循环和eventListener以处理每个节点列表单击事件
btn.forEach（btn=>{
btn.addEventListener（'click'，showDrpDown）
})
a{
光标：指针；
}
下载btn容器{
显示：内联块；
浮动：对；
}
下载btn容器a{
字号：700；
字母间距：.5px；
颜色：#c94927；
}
/*下拉内容（默认情况下隐藏）*/
.下拉下载{
显示：无；
位置：绝对位置；
背景色：#f1f1；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
/*下拉列表中的链接*/
.下拉下载{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
/*更改悬停时下拉链接的颜色*/
.下拉下载a:悬停{
背景色：#ddd
}
/*显示下拉菜单（当用户单击下拉按钮时，使用JS将此类添加到.dropdown内容容器）*/
.表演{
显示：块；
}

下载列表






下载列表
我检查了您的代码，发现了几个错误

错误1在您的示例中，同一个函数命名了两次，因此我假设这只是为了测试，但请确保在测试时更新函数名，例如，您的JS有myFunction（）和myFunction（），请尝试myFunction（）和myFunction2（）

错误2您的windows.onClick事件需要像这样重写：

// Close the dropdown menu if the user clicks outside of it
window.onclick = function (event) {
    if (!event.target.matches('.dropbtn')) {
        var dropdowns = document.getElementsByClassName("dropdown-download"),
            showEvent = 'show';
        for (var i = 0; i < dropdowns.length; i++) {
            var currentElement = dropdowns[i],
                currentElementAsString = dropdowns[i].toString();
            if (currentElementAsString.localeCompare(showEvent)) {
                currentElement.classList.remove('show');
            }
        }
    }
}

<a onclick="myFunction()" title="Download List"  class="dropbtn material-icons">save_alt</a>

这应该像这样重写：

// Close the dropdown menu if the user clicks outside of it
window.onclick = function (event) {
    if (!event.target.matches('.dropbtn')) {
        var dropdowns = document.getElementsByClassName("dropdown-download"),
            showEvent = 'show';
        for (var i = 0; i < dropdowns.length; i++) {
            var currentElement = dropdowns[i],
                currentElementAsString = dropdowns[i].toString();
            if (currentElementAsString.localeCompare(showEvent)) {
                currentElement.classList.remove('show');
            }
        }
    }
}

<a onclick="myFunction()" title="Download List"  class="dropbtn material-icons">save_alt</a>