WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

How to hide dropdown menu on click outside of the element in jQuery

Topic: JavaScript / jQueryPrev|Next

Answer: Use the jQuery on() method

You can use the jQuery click() method in combination with the on() method to hide the dropdown menu when the user click outside of the trigger element.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>jQuery Hide Dropdown on Click Outside</title>
  • <style type="text/css">
  •     ul{
  •         padding: 0;
  •         list-style: none;
  •         background: #f2f2f2;
  •     }
  •     ul li{
  •         display: inline-block;
  •         position: relative;
  •         line-height: 21px;
  •         text-align: left;
  •     }
  •     ul li a{
  •         display: block;
  •         padding: 8px 25px;
  •         color: #333;
  •         text-decoration: none;
  •     }
  •     ul li a:hover{
  •         color: #fff;
  •         background: #939393;
  •     }
  •     ul li ul.dropdown-menu{
  •         min-width: 100%; /* Set width of the dropdown */
  •         background: #f2f2f2;
  •         display: none;
  •         position: absolute;
  •         z-index: 999;
  •         left: 0;
  •     }
  •     ul li ul.dropdown-menu li{
  •         display: block;
  •     }
  • </style>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  • <script type="text/javascript">
  •     $(document).ready(function(){
  •         // Show hide popover
  •         $(".dropdown").click(function(){
  •             $(this).find(".dropdown-menu").slideToggle("fast");
  •         });
  •     });
  •     $(document).on("click", function(event){
  •         var $trigger = $(".dropdown");
  •         if($trigger !== event.target && !$trigger.has(event.target).length){
  •             $(".dropdown-menu").slideUp("fast");
  •         }            
  •     });
  • </script>
  • </head>
  • <body>
  •     <ul>
  •         <li><a href="#">Home</a></li>
  •         <li><a href="#">About</a></li>
  •         <li class="dropdown">
  •             <a href="#">Products &#9662;</a>
  •             <ul class="dropdown-menu">
  •                 <li><a href="#">Laptops</a></li>
  •                 <li><a href="#">Monitors</a></li>
  •                 <li><a href="#">Printers</a></li>
  •             </ul>
  •         </li>
  •         <li><a href="#">Contact</a></li>
  •     </ul>
  • </body>
  • </html>

Related FAQ

Here are some more FAQ related to this topic:

Your Feedback:

We would love to hear from you, please drop us a line.