How can I use jQuery to automatically close a Dropdown menu when clicking anywhere else on the page?

Question

How can I use jQuery to automatically close a Dropdown menu when clicking anywhere else on the page?

I have implemented a dropdown menu that appears when inline text links are clicked. The jQuery click event is used to show the dropdown menu upon clicking a link.

My goal is to make the dropdown menu revert to a hidden state when a click is made anywhere on the page. Currently, you have to click the link again to close the menu.

Check out the demo here

Here is the jQuery code:

// Show Dropdown Menu when link is clicked
$(function(){
  $(".inline-dropdown-menu").click(function(e){
    $(this).find(".inline-dropdown-menu-list:first").toggle();
    e.preventDefault(); // Stop navigation
  });
});

And here is the HTML markup:

<span class="inline-dropdown-menu">
    <a href="">My Link that reveals a DropDown Menu when clicked on<span class="caret"></span></a>

    <ul class="inline-dropdown-menu-list">
        <li class="bottomBorder">
            <a href="" tabindex="-1">alphabetically</a>
        </li>
        <li>
            <a href="" tabindex="-1">2. the first report, alphabetically</a>
        </li>
        <li>
            <a href="" tabindex="-1">3. the first report, alphabetically</a>
        </li>
    </ul>
</span>

javascript jquery html css

Answer 1

Answer №1

http://codepen.io/anon/pen/HgMxE

$(function () {
    $(".inline-dropdown-menu").click(function (e) {
        $(".inline-dropdown-menu-list").hide(); // hides other dropdowns
        $(this).find(".inline-dropdown-menu-list:first").toggle();

        e.preventDefault(); // Prevent default action
    });
});

// Hide dropdown if you click outside of inline-dropdown-menu class

$(document).click(function (e) {
    var container = $(".inline-dropdown-menu");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
        $(".inline-dropdown-menu-list").hide();
    }
});

Answer 2

http://codepen.io/anon/pen/HgMxE

$(function () {
    $(".inline-dropdown-menu").click(function (e) {
        $(".inline-dropdown-menu-list").hide(); // hides other dropdowns
        $(this).find(".inline-dropdown-menu-list:first").toggle();

        e.preventDefault(); // Prevent default action
    });
});

// Hide dropdown if you click outside of inline-dropdown-menu class

$(document).click(function (e) {
    var container = $(".inline-dropdown-menu");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
        $(".inline-dropdown-menu-list").hide();
    }
});

Answer 3

Answer №2

Check out this helpful code snippet:

let isOpen = false;

$(".inline-dropdown-menu").click(function(event){
    $(".inline-dropdown-menu-list").not(':hidden').hide();
    $(this).find(".inline-dropdown-menu-list:first").toggle();
    event.preventDefault(); // Prevent default action
    isOpen = true;   
});

$('body').click(function(){
    if (isOpen) {
        isOpen = false;
        return;
    }

    $(".inline-dropdown-menu-list").not(':hidden').hide();
});

Answer 4

Check out this helpful code snippet:

let isOpen = false;

$(".inline-dropdown-menu").click(function(event){
    $(".inline-dropdown-menu-list").not(':hidden').hide();
    $(this).find(".inline-dropdown-menu-list:first").toggle();
    event.preventDefault(); // Prevent default action
    isOpen = true;   
});

$('body').click(function(){
    if (isOpen) {
        isOpen = false;
        return;
    }

    $(".inline-dropdown-menu-list").not(':hidden').hide();
});

Answer 5

Answer №3

give this a shot

$(document).ready(function(){
  $(".custom-dropdown").click(function(event){
    event.stopPropagation();
    $(this).find(".dropdown-menu:first").toggle();
    event.preventDefault(); // Prevent default action
 });

$("body").click(function(event){
$(".dropdown-menu").hide();
});

});

Answer 6

give this a shot

$(document).ready(function(){
  $(".custom-dropdown").click(function(event){
    event.stopPropagation();
    $(this).find(".dropdown-menu:first").toggle();
    event.preventDefault(); // Prevent default action
 });

$("body").click(function(event){
$(".dropdown-menu").hide();
});

});

Answer 7

Answer №4

When a user clicks on the link, an event is added to the body. Once the body is clicked, the dropdown menu will be hidden and the event on the body will be removed. A setTimeout function is used to prevent double-clicking. Additionally, a namespace "click.ddls" is added to the body click event to allow for other click events.

Take a look at this demonstration: http://example.com/demo

// Display Dropdown Menu on link click
$(function(){

  $(".inline-dropdown-menu a").click(function(e){
      e.preventDefault(); // Prevent navigation
      $("body").off("click.ddls");
      $(".inline-dropdown-menu-list").toggle();

      // Prevent double-click
      setTimeout(function(){
          $("body").on("click.ddls", function(){
              console.log("Body was clicked");
              $(".inline-dropdown-menu-list").hide();
              $("body").off("click.ddls");
          });
      }, 300);
  });

});

Answer 8

When a user clicks on the link, an event is added to the body. Once the body is clicked, the dropdown menu will be hidden and the event on the body will be removed. A setTimeout function is used to prevent double-clicking. Additionally, a namespace "click.ddls" is added to the body click event to allow for other click events.

Take a look at this demonstration: http://example.com/demo

// Display Dropdown Menu on link click
$(function(){

  $(".inline-dropdown-menu a").click(function(e){
      e.preventDefault(); // Prevent navigation
      $("body").off("click.ddls");
      $(".inline-dropdown-menu-list").toggle();

      // Prevent double-click
      setTimeout(function(){
          $("body").on("click.ddls", function(){
              console.log("Body was clicked");
              $(".inline-dropdown-menu-list").hide();
              $("body").off("click.ddls");
          });
      }, 300);
  });

});

Answer 9

Answer №5

If you don't use unique class names, you can iterate through them to determine if they are visible and then close them. Although the following code may not be functioning properly (apologies for that), it can guide you in the right direction. Personally, I prefer using on("click") over click() especially when dealing with dynamic elements that are not yet accessible to the DOM.

     $('*').not(".inline-dropdown-menu").on("click", function(){
         $('.inline-dropdown-menu-list').each(function() {
             if ($(this).is(":visible")) {
                 $(this).toggle();
             }                                                                 
         });

You could also create a counter based on

$('.inline-dropdown-menu-list').length

and assign a data-id to each one so you can match and keep track of them. I hope this explanation is helpful to you.

Answer 10

If you don't use unique class names, you can iterate through them to determine if they are visible and then close them. Although the following code may not be functioning properly (apologies for that), it can guide you in the right direction. Personally, I prefer using on("click") over click() especially when dealing with dynamic elements that are not yet accessible to the DOM.

     $('*').not(".inline-dropdown-menu").on("click", function(){
         $('.inline-dropdown-menu-list').each(function() {
             if ($(this).is(":visible")) {
                 $(this).toggle();
             }                                                                 
         });

You could also create a counter based on

$('.inline-dropdown-menu-list').length

and assign a data-id to each one so you can match and keep track of them. I hope this explanation is helpful to you.

Answer 11

Answer №6

Let me clarify, you're looking to mimic the functionality of a drop-down arrow when clicking on the body. If that's the case, give this a try:

$("body").click(function(e){
$('.inline-dropdown-menu.open ').find('.inline-dropdown-menu-list:first').toggle();
});

Check out the demo here. Keep in mind that clicking on the body again will toggle the drop-down once more. Feel free to customize this behavior to your liking.

Answer 12

Let me clarify, you're looking to mimic the functionality of a drop-down arrow when clicking on the body. If that's the case, give this a try:

$("body").click(function(e){
$('.inline-dropdown-menu.open ').find('.inline-dropdown-menu-list:first').toggle();
});

Check out the demo here. Keep in mind that clicking on the body again will toggle the drop-down once more. Feel free to customize this behavior to your liking.

How can I use jQuery to automatically close a Dropdown menu when clicking anywhere else on the page?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

The Nestjs cronjob is having trouble accessing the injected service

CDK deployment of lambda functions does not currently support the importing of Typescript modules

Removing an item with Ajax upon page reload

Tips on how to highlight a clicked list item:

Execute the PHP file using a script tag

I require access to the Google Places API in order to implement search functionality for

Apply a 100% width to an image within an animation

Using the Mousetrap binding on a nuxt.js page may not be effective

What's the best way to stack two input fields vertically and combine them into a single unit?

Unable to position a div alongside a fluid div with minimum and maximum widths

Guide on redirecting a web page using jQuery

Multiple charts experiencing disappearing x-axis labels on Flot

Create a unique custom spinning loader for a straightforward Vue.js application

Organize your information starting from the left and moving to the right

Tips for aligning text to the right within a div using the "justify" text-align property

Error: The $http variable in Vue Resource is not defined

Achieving parent element offset in JavaScript using AngularJS

The Empty Spaces Surrounding the Navigation Bar in HTML/CSS

Avoid re-running the onScroll function until completion

Issues with jQuery change function in Internet Explorer