在下拉菜单外部单击时关闭下拉菜单

Question

https://ataqfuel.com/pages/home-page-v2

I am trying to get button 2 and 3 to close like button 1 does when clicking outside of the dropdown menu. I tried adding myFunction1 code to myFunction2 and myFunction3 code but I'm not sure if I messed up the naming or what because all the dropdowns stopped functioning then.

 function myFunction1() { document.getElementById("myDropdown1").classList.toggle("show"); document.getElementById("myDropdown1").addEventListener('click', function(event) { event.stopPropagation(); }); } window.onclick = function(event) { if (!event.target.matches('.dropbtn1')) { var dropdowns = document.getElementsByClassName("dropdown-content1"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } document.getElementById("dropbtn1").addEventListener('click', function(event) { event.stopPropagation(); }); function myFunction2() { document.getElementById("myDropdown2").classList.toggle("show"); } window.onclick = function(event) { if (!event.target.matches('.dropbtn2')) { var dropdowns = document.getElementsByClassName("dropdown-content2"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } function myFunction3() { document.getElementById("myDropdown3").classList.toggle("show"); } window.onclick = function(event) { if (!event.target.matches('.dropbtn3')) { var dropdowns = document.getElementsByClassName("dropdown-content3"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } }

 CSS : .dropbtn { margin: 5%; background-color: #d3d3d3; color: gray; padding: 16px; font-size: 16px; font-weight: 500; border: none; cursor: pointer; } .dropbtn:hover, .dropbtn:focus { background-color: #edeb3f; } .dropdown { position: relative; display: inline; min-width: 160px; } .dropdown-content { display: none; background-color: #f1f1f1; min-width: 160px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown a:hover { background-color: #ddd; } .show { display: block; }

Answer 1

    $('.moderate .button').on('click', (event) => {
  $(event.target).siblings('.dropdown')
    .toggleClass('is-open');
});

$(document).click(function(e) {
  $('.moderate')
    .not($('.moderate').has($(e.target)))
    .children('.dropdown')
    .removeClass('is-open');
});

    <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" rel="stylesheet" />

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

<style>
.dropdown {
  box-shadow: 0 0 2px #777;
  display: none;
  left: 0;
  position: absolute;
  padding: 2px;
  z-index: 10;
}

.dropdown a {
  font-size: 12px;
  padding: 4px;
}

.dropdown.is-open {
  display: block;
}
</style>


<div class="control moderate">
  <button class="button is-small" type="button">
        moderate
      </button>

  <div class="box dropdown">
    <ul>
      <li><a class="nav-item">edit</a></li>
      <li><a class="nav-item">delete</a></li>
      <li><a class="nav-item">block user</a>   </li>
    </ul>
  </div>
</div>


<div class="control moderate">
  <button class="button is-small" type="button">
        moderate
      </button>

  <div class="box dropdown">
    <ul>
      <li><a class="nav-item">edit</a></li>
      <li><a class="nav-item">delete</a></li>
      <li><a class="nav-item">block user</a></li>
    </ul>
  </div>
</div>

Answer 2

You can use full screen width and height fixed backdrop for that. And after backdrop click close menu. It should be something like this:

jQuery(".backdrop").click(function(){
  jQuery("#menu").toggleClass("open");
});