单击外部时关闭下拉菜单

Question

https://ataqfuel.com/pages/home-page-v2我试图让按钮 2 和 3 在单击下拉菜单外部时像按钮 1 一样关闭。我尝试将 myFunction1 代码添加到 myFunction2 和 myFunction3 代码，但我不确定我是否搞砸了命名，或者是因为所有下拉菜单都停止运行而导致的。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');      }    }  }}

Answer 1

您可以为此使用全屏宽度和高度固定背景。在背景后点击关闭菜单。它应该是这样的：

jQuery(".backdrop").click(function(){

  jQuery("#menu").toggleClass("open");

});

Answer 2

   $('.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>