How do you close one dropdown menu when you open another, or clicking everywhere else in the document to close them all?

Thanks Steven Parker.

Yes, in the codepen sometimes occurs this thing (ResizeObserver loop limit exceeded), but as I use Firefox (when coding with Visual studio code) doesn't show anything. I can't find much information about what that means.

As for the second part I can't figure out how it should be done. "the window event should catch any click, including one one that opens the submenu". How can I achieve that? By adding a the first addEventListener with the toggle as argument in the second. Like this:

target.addEventListener(type, listener);

I found this code in stackoverflow.

function myFunction(event, dropDownName) {
  //Pass in your dropdownName which is the dropdown  
  var dropDownHandler = document.getElementById(dropDownName);

  dropDownHandler.classList.toggle("show");
  // Get the trigger element of the dropdown
  var menuHandler = event.currentTarget;

  if (dropDownHandler.classList.contains("show")) {
    //Attach only when the dropdown is active,
    //to ensure onclick isn't called always
    document.addEventListener("click", function(docEvent) {
      documentHandler(docEvent, menuHandler)
    });
  } else {
    dropDownHandler.classList.toggle("show");
    // If is closed, remove the handler
    document.removeEventListener("click", documentHandler);
  }

  function documentHandler(event, menuHandler) {
    if (menuHandler.contains(event.target)) {
      dropDownHandler.classList.add("show");
    } else {
      dropDownHandler.classList.remove("show");
    }
  }
}

What I meant was that the window listener does catch every click, including the one caught by the mb_menu listener. So they both happen and one cancels out the other.

My suggested replacement is for both of them, so the one new handler does both jobs of closing everything first, then opening the one clicked.

I can't comment on the stackoverflow code as it is just part of a solution that would include more JavaScript and some HTML, which might have a different structure from your own.

Yes, I finally understood it. Your first answer with the code was very enlightening. Unlikely I can't make the search form open (second dropdown). I am sure I am doing something wrong. Also when I re-click the dropdown menus (to close them) doesn't close. Should I add another function inside the event listener to achieve the result I want?

You can easily add a check if the menu was already open, and if so just skip the opening later:

window.addEventListener("click", event => {
  // first check if it was already open
  let wasOpen = event.target.matches(".mb-menu a") &&
    event.target.nextElementSibling.classList.contains("open");
  // next close every dropdown
  for (let dd of dropdown) dd.classList.toggle("open", false);
  // then if a link was clicked, open the associated dropdown, BUT only if not open before
  if (!wasOpen && event.target.matches(".mb-menu a")) {
    event.target.nextElementSibling.classList.toggle("open");
  }
});

This code won't work with "search" since it doesn't follow the same HTML structure (has no "mb-menu" classs and contains no list with "dropdown" class). You could rebuild it to fit the same pattern, or handle it with different code.

Yes, I see. The difficult is to apply all this logic and turn it into code. You make it so simple with so little code. I couldn't figure it out, I can't imagine how I would had to deal with more complicated stuff. lol. It needs a lot of practice.