Javascript 如何在单击其他位置并更改按钮上的OnClick样式时关闭下拉菜单

我刚刚用

onclick

事件创建了两个按钮

您可以查看按钮的演示

然而，我需要两个问题的帮助，我不知道如何解决

第1期

正如您在演示中所看到的，如果您首先单击一个按钮，将显示一个下拉菜单，但是如果您在第一个下拉菜单可见时单击第二个按钮，则第二个下拉菜单将与第一个下拉菜单重叠

当您使用javascript单击页面上的其他位置或其他按钮时，如何关闭下拉列表

第二期

我希望按钮看起来像这样，即使你在按钮上方悬停

这就是当你点击按钮，下拉菜单变为可见时的样子。即使你没有鼠标在按钮或下拉菜单上，它也应该保持这样

如何使用JavaScript实现这一点

---

提前谢谢

您只需要保留一个元素数组，当您将其中一个元素设置为“显示”时，将其他元素设置为“不显示”

var dropdowns = ['language', 'delivery-country'];
var elements = [];

var hideElements = function (dropdown) {
  for (var i = 0, l = dropdowns.length; i < l; i++) {
    if (dropdown !== dropdowns[i]) {
        var div = document.getElementById(dropdowns[i] + '-dropdown');
          div.style.display = '';      
        elements[i].className = 'inactive';
    }
  }
}

for (var i = 0, l = dropdowns.length; i < l; i++) {
  elements[i] = document.getElementById(dropdowns[i] + '-icon');

  (function (index) {
    elements[index].onclick = function() {
      var div = document.getElementById(dropdowns[index] + '-dropdown');

        if (div.style.display !== '') {
            div.style.display = '';
          elements[index].className = 'inactive';
        } else {
            div.style.display = 'block';
          elements[index].className = 'active';
      }
      hideElements(dropdowns[index]);
    };
  })(i);
}

var下拉列表=['language'，'delivery country']；
var元素=[]；
var hideElements=函数（下拉列表）{
对于（变量i=0，l=dropdowns.length；i

对于问题的第二部分，在html中添加相应的类（非活动）。上面的代码将切换类，您只需要了解CSS。首先删除图标上的悬停类，并为图标使用类，而不是为每个元素指定ID