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

Question

我刚刚创建了两个带有onclick事件的按钮，

您可以查看按钮here.

的演示

但是，我需要帮助解决两个问题，我不知道如何解决。

第1期

正如您在演示中看到的，如果您首先单击一个按钮，则会出现一个下拉菜单，但如果您在第一个下拉菜单可见时单击第二个按钮，则第二个下拉列表会与第一个下拉菜单重叠。

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

第2期

即使将鼠标悬停在按钮

上，我也希望按钮看起来像这样

当您单击按钮并且下拉菜单变为可见时，这就是它的外观。即使您没有按钮或下拉菜单上的鼠标，它也应保持这样。

如何使用JavaScript完成此操作？

提前致谢！

Answer 1

你需要保留一个元素数组，当你设置一个元素来显示时，将其他元素设置为不显示。

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);
}

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