Javascript 当容器外部发生单击事件时，尝试关闭容器

我有两个图标可以打开它们的容器，它们也可以关闭彼此的容器。但是，当容器外部发生单击时，我无法关闭容器

请看看这个

这是密码

---

请按如下方式更新脚本和结尾：

---

$（'div.test'）.focusout（函数（）{closeAll（）；}）

我克隆并编辑了你的小提琴。基本上添加了这个点击处理程序和一些样式更改

---

但是，这是可行的，当我在容器内部单击时，它会关闭容器，这是不应该发生的。如果我单击主体，它不会关闭，因此我将单击处理程序的选择器更改为文档，这解决了问题。

$('.btn-one').click(function() {
  if ($(this).attr('data-container-status') == 'is-open') {
    $(this).next().removeClass('abc-active');
    $(this).attr('data-container-status', 'is-closed');
  } else {
    closeAll();
    $(this).next().addClass('abc-active');
    $(this).attr('data-container-status', 'is-open');
  }
});

$('.btn-two').click(function() {
  if ($(this).attr('data-container-status') == 'is-open') {
    $(this).next().removeClass('abc-active');
    $(this).attr('data-container-status', 'is-closed');
  } else {
    closeAll();
    $(this).next().addClass('abc-active');
    $(this).attr('data-container-status', 'is-open');
  }
});

function closeAll() {
  $('.container').removeClass('abc-active');
  $('.abc-btn').attr('data-container-status', 'is-closed');
}

  var icon = $('.icon');
    var container = $('.container');

    $('.test').click(function (e) {
      var className = e.target.className;
      if (className.indexOf('icon') !== -1 || className.indexOf('container') !== -1) {
        return;
      }
      closeAll();
    });