"打开下拉菜单，选择多个选项"

Question

当您点击“Press Me”时，一个下拉菜单会打开，再次点击它或窗口的任意其他位置，它会关闭。

我还希望将此功能同步添加到旁边的“dropdown-arrow”上，以便两者联动。我尝试给“dropdown-arrow”也添加了onclick="myFunction()"，但没有成功。

以下是您的代码片段，已进行适当的格式化和注释。从代码中可以看出，您已经为ID为"verify-name"的元素绑定了myFunction()，该函数用于切换下拉菜单的显示状态。同时，您也设置了窗口点击事件，用于在点击窗口其他部分时关闭下拉菜单。

问题可能出在您尝试为dropdown-arrow添加点击事件的方式上，但实际上在提供的HTML代码中并没有看到您所描述的修改。为了解决这个问题，您需要确保也为dropdown-arrow的元素添加相同的onclick事件处理器。下面是修改后的HTML代码段，其中包含了对dropdown-arrow的点击事件绑定：

aioobe · Answer

在您的HTML中给“dropdown-arrow”添加onclick事件：

调整window.onclick函数，使其检查verify-name和dropdown-arrow两个元素：

window.onclick = function(event) {
    if (!event.target.matches('#verify-name') && !event.target.matches('#dropdown-arrow')) {
        var dropdowns = document.getElementsByClassName('dropdown-content');
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
};

通过这些改动，无论是点击“Press Me”链接还是下拉箭头，都将切换下拉菜单的显示状态。如果下拉菜单处于开启状态，点击窗口其它任意位置将会将其关闭。

James Raitsev · Answer

为了解决您的问题，我想到两种方法：

为dropdown-arrow单独添加点击事件监听器。
使用Element.closest()方法检查点击的元素是否为Press Me文本或.dropdown-arrow。

让我为您展示第二种方法的实现代码。首先，我将window.onclick赋值替换为使用window.addEventListener('click', function() {...})，这样做可以避免与其他点击事件监听器的潜在冲突，同时也是推荐的做法。

在下面的代码中，我创建了一个名为toggleDropdown的函数来切换下拉菜单的显示状态。并且，我修改了窗口点击事件的处理方式，使其能够识别点击的是“Press Me”还是下拉箭头，并据此决定是打开还是关闭下拉菜单。


  
    
    Press Me
    
    
    
      Logout