How can I make a dropdown menu disappear when clicking on something else-CodePudding

I've tried making a dropdown menu for a website that I'm working on and it worked, but I don't know how I can make it disappear after I press somewhere else. Can someone help me pls?

I tried searching on google but didn't succeed unfortunately

<script>
        function toogleRESTAURANT(){
            let restaurant = document.getElementById("restaurant")
            restaurant.classList.toggle('active')
        }
    </script>

    <script>
        function toggleBAR(){
            let bar = document.getElementById("bar")
            bar.classList.toggle('active')
        }
    </script>
    

    

    <script>
        function togglePrivate(){
            let dining = document.getElementById("dining")
            dining.classList.toggle('active')
        }
    </script>

    <nav> 
        <div>
            <button onclick="toogleRESTAURANT()">RESTAURANT</button>
            <ul id="restaurant">
                <li><a href="#">BOOK NOW</a></li>
                <li><a href="#">MENUS</a></li>
                <li><a href="#">AFTENOON TEA</a></li>
                <li><a href="#">ROSE TASTING TRIO</a></li>
                <li><a href="#">FAQ</a></li>
            </ul>
        </div>

        <div>
            <button  onclick="toggleBAR()">BAR</button>
            <ul id="bar">
                <li><a href="#">BOOK NOW</a></li>
                <li><a href="#">MENUS</a></li>
                <li><a href="#">ROSE TASTING TRIO</a></li>
            </ul>
        </div>
        

        <div>
            <button  onclick="togglePrivate()">PRIVATE DINING</button>
            <ul id="dining">
                <!-- <li><a href="#">DOAR TEST</a></li> -->
            </ul>
        </div>

    </nav>

CodePudding user response：

You can add an click event handler on the document object, so that you can detect when a user clicks anywhere else on the webpage and then hide the dropdown (in this case remove the "active" class from the dropdown classList) Check on this code snippet.

document.onclick = function (event) {
    if (bar.classList.contains("active") && !event.target.matches(".btnBAR")) {
      bar.classList.remove("active");
    }
    if (
      restaurant.classList.contains("active") && !event.target.matches(".btnRESTAURANT")
    ) {
      restaurant.classList.remove("active");
    }
    if (
      dining.classList.contains("active") &&
      !event.target.matches(".privateD")
    ) {
      bar.classList.remove("active");
    }
  };

CodePudding user response：

You don't really need separate functions for each menu. When menu was opened, register a click event listener on window or document object, once it triggered, close the menu and remove listener. This is not the best approach overall though.

var opened = null;
function toggle(event)
{
  event.stopPropagation(); //make sure we don't get "double click" event
  const button = event.target;
  //close previous menu
  if (opened && opened.target !== button)
    toggle(opened);

  if (button && button.tagName == "BUTTON")
  {
    const node = button.parentNode.querySelector("ul");
    node.classList.toggle('active');
    //if menu opened, register click event on window
    if (node.classList.contains("active"))
    {
      window.addEventListener("click", toggle);
      //store current event so we can use it later to close menu when clicked anywhere
      opened = event;
    }
  }
  else //remove window click event listener and clear opened variable
    opened = window.removeEventListener("click", toggle);

}

nav > div > ul
{
  display: none;
}
.active
{
  display: block;
}

<nav> 
        <div>
            <button onclick="toggle(event)">RESTAURANT</button>
            <ul id="restaurant">
                <li><a href="#">BOOK NOW</a></li>
                <li><a href="#">MENUS</a></li>
                <li><a href="#">AFTENOON TEA</a></li>
                <li><a href="#">ROSE TASTING TRIO</a></li>
                <li><a href="#">FAQ</a></li>
            </ul>
        </div>

        <div>
            <button  onclick="toggle(event)">BAR</button>
            <ul id="bar">
                <li><a href="#">BOOK NOW</a></li>
                <li><a href="#">MENUS</a></li>
                <li><a href="#">ROSE TASTING TRIO</a></li>
            </ul>
        </div>
        

        <div>
            <button  onclick="toggle(event)">PRIVATE DINING</button>
            <ul id="dining">
                <!-- <li><a href="#">DOAR TEST</a></li> -->
            </ul>
        </div>

    </nav>