单击外部时关闭下拉菜单

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(){&nbsp; jQuery("#menu").toggleClass("open");});

Answer 2

&nbsp; &nbsp;$('.moderate .button').on('click', (event) => {&nbsp; $(event.target).siblings('.dropdown')&nbsp; &nbsp; .toggleClass('is-open');});$(document).click(function(e) {&nbsp; $('.moderate')&nbsp; &nbsp; .not($('.moderate').has($(e.target)))&nbsp; &nbsp; .children('.dropdown')&nbsp; &nbsp; .removeClass('is-open');});&nbsp; &nbsp; <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" rel="stylesheet" /><script&nbsp; src="https://code.jquery.com/jquery-3.2.1.min.js"&nbsp; integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="&nbsp; crossorigin="anonymous"></script><style>.dropdown {&nbsp; box-shadow: 0 0 2px #777;&nbsp; display: none;&nbsp; left: 0;&nbsp; position: absolute;&nbsp; padding: 2px;&nbsp; z-index: 10;}.dropdown a {&nbsp; font-size: 12px;&nbsp; padding: 4px;}.dropdown.is-open {&nbsp; display: block;}</style><div class="control moderate">&nbsp; <button class="button is-small" type="button">&nbsp; &nbsp; &nbsp; &nbsp; moderate&nbsp; &nbsp; &nbsp; </button>&nbsp; <div class="box dropdown">&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; <li><a class="nav-item">edit</a></li>&nbsp; &nbsp; &nbsp; <li><a class="nav-item">delete</a></li>&nbsp; &nbsp; &nbsp; <li><a class="nav-item">block user</a>&nbsp; &nbsp;</li>&nbsp; &nbsp; </ul>&nbsp; </div></div><div class="control moderate">&nbsp; <button class="button is-small" type="button">&nbsp; &nbsp; &nbsp; &nbsp; moderate&nbsp; &nbsp; &nbsp; </button>&nbsp; <div class="box dropdown">&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; <li><a class="nav-item">edit</a></li>&nbsp; &nbsp; &nbsp; <li><a class="nav-item">delete</a></li>&nbsp; &nbsp; &nbsp; <li><a class="nav-item">block user</a></li>&nbsp; &nbsp; </ul>&nbsp; </div></div>