单击内容外部时按钮关闭

Question

我想在菜单区域外部单击时打开它，它会自动关闭。如果有人可以帮助我，因为我不懂任何JavaScript感谢..你可以看到我的网站，这是作为一个小组项目开发的最终课程演示here并看到按钮工作在哪里说MAIS

＆＃13;

＆＃13;

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}

＆＃13;

.collapsible {
  cursor: pointer;
  border: none;
  outline: none;
  color: white;
  background-color: inherit;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  font-family: Arial;
  display: block;
  height: 65px;
  padding: 22.5px 16px;
  margin-left: 35px;
  transition: all .3s;
  width: 80px;
}

.collapsible:hover {
  color: #08b0ff;
}

.collapsible:active {
  color: #08b0ff;
}

.content {
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  top: 65px;
  background-color: #f9f9f9;
  width: 1170px;
  left: -300px;
}

.content {
  float: left;
  overflow: hidden;
}

.content {
  position: absolute;
  top: 65px;
  background-color: #f9f9f9;
  width: 1170px;
  left: -300px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  margin: 0 auto;
}

.content .header {
  background-color: rgb(60, 60, 60);
  ;
  padding: 16px;
  color: white;
  height: 70px;
}

＆＃13;

<li>
  <div class='dropdown'>
    <button class='collapsible'>Mais
      <i class='fa fa-caret-down' style='float:right; padding-top: 1.5px;padding-bottom: 1.5px;'/>
    </button>
    <div class='content'>
      <div class='bottom-border2' />
      <div class='header'>
        <h2 style='color:#fff; '>Categorias</h2>
      </div>
      <div class='row'>
        <div class='column'>
          <h3 style='color:#fff;'>Inovação</h3>
          <div style='background-color: rgb(97, 255, 0);height: 2px; width: 300px;  margin: auto;' />
          <div id='dpcontent1'>
            <a class='center' href='https://trit3k.blogspot.com/search/label/Ci%C3%AAncia'>Ciência</a>
            <a class='center' href='#'>Tecnologia</a>
          </div>
        </div>
        <div class='column'>
          <h3 style=' color:#fff;'>Computadores</h3>
          <div style='background-color: rgb(8, 176, 255);height: 2px; width: 300px;  margin: auto;' />
          <div id='dpcontent2'>
            <a class='center2' href='#'>Hardware</a>
            <a class='center2' href='https://trit3k.blogspot.com/search/label/Software'>Software</a>
            <a class='center2' href='https://trit3k.blogspot.com/search/label/Internet'>Internet</a>
            <a class='center2' href='https://trit3k.blogspot.com/search/label/Smartphone'>Smartphone</a>
            <a class='center2' href='#'>Mac</a>
            <a class='center2' href='#'>Linux</a>
          </div>
        </div>
        <div class='column'>
          <h3 style='color:#fff;'>Gaming</h3>
          <div style='background-color: rgb(255, 25, 0);height: 2px; width: 300px;  margin: auto;' />
          <div id='dpcontent3'>
            <a class='center3' href='#'>eSPORTS</a>
            <a class='center3' href='https://trit3k.blogspot.pt/search/label/Jogos'>Jogos</a>
            <a class='center3' href='#'>Consolas</a>
            <a class='center3' href='#'>Lançamentos</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</li>

＆＃13;

＆＃13;

＆＃13;