Press anywhere else on the screen to dismiss the bootstrap menu

Question

Press anywhere else on the screen to dismiss the bootstrap menu

I've been attempting to find a solution for closing the Bootstrap menu when clicking outside of it in a mobile window size, but I just can't seem to make it work. I did manage to get it working when clicking one of the 'a' links using this code:

// This code collapses the menu buttons when clicking a link
$('document').ready(function() 
{
    if ($('a').on('click', function() 
            { 
                $('.collapse, #mainContainer').removeClass('in'); 
                $('.navbar-toggle').toggleClass('collapsed'); // button
            }));
});

But how can I close the menu by clicking outside of the menu navbar?

Here's the link to my page where you can see the issue: iwebdesign.se

I have already tried the following, but it didn't work:

Answer №1

If you're looking to achieve different actions when clicking inside or outside of a menu (such as collapsing the menu), you can use the following code snippet to determine if the click is inside or outside the menu:

$('body').click(function(event){
  // check if the clicked element is a descendant of the menu 
  if ($(event.target).closest('.menu').length) {
    return; // do nothing if the event target is within the menu
  } else {
    // perform an action if the event target is outside the menu
     // code for collapsing menu goes here...
  }
});

You can view a working example at https://jsfiddle.net/L3qg4pa8/5/ to get a better idea of how it works.

Don't forget to update the '.menu' selector in the .closest() function with the appropriate container selector for your menu.

Answer 2

If you're looking to achieve different actions when clicking inside or outside of a menu (such as collapsing the menu), you can use the following code snippet to determine if the click is inside or outside the menu:

$('body').click(function(event){
  // check if the clicked element is a descendant of the menu 
  if ($(event.target).closest('.menu').length) {
    return; // do nothing if the event target is within the menu
  } else {
    // perform an action if the event target is outside the menu
     // code for collapsing menu goes here...
  }
});

You can view a working example at https://jsfiddle.net/L3qg4pa8/5/ to get a better idea of how it works.

Don't forget to update the '.menu' selector in the .closest() function with the appropriate container selector for your menu.

Answer 3

Answer №2

  $(document).on('click',function(){
   $('.collapse').collapse('hide');
});

You can simply paste this code snippet into your custom script or index.html file.

A big thank you to Remy for the tip! Remember, clicking outside will close/hide the Bootstrap toggle menu.

Answer 4

  $(document).on('click',function(){
   $('.collapse').collapse('hide');
});

You can simply paste this code snippet into your custom script or index.html file.

A big thank you to Remy for the tip! Remember, clicking outside will close/hide the Bootstrap toggle menu.

Answer 5

Answer №3

Below is the solution:

(window).on('click',function(){
   $('.collapse').collapse('hide');
})

Trust this helps!

Ella

Answer 6

Below is the solution:

(window).on('click',function(){
   $('.collapse').collapse('hide');
})

Trust this helps!

Ella

Press anywhere else on the screen to dismiss the bootstrap menu

Answer №1

Answer №2

Answer №3

Similar questions

Encountering an issue when transferring data between controllers utilizing a demo service

Setting the height of columns in a Bootstrap panel to 100%

Using XSLT with JavaScript

React Native vector icons display enigmatic symbols

Error with Bootstrap Layout caused by the StringBuilder

The error message "TypeError: Cannot set property 'href' of undefined" occurred at angular.js line 12520 when trying to set $window.location.href

Show several fresh windows

Managing the invocation of a promise multiple times in AngularJS, and handling some specific exceptions

Learn the process of directing to a view in a jQuery AJAX call with Spring MVC

Changing an ng-repeat filter following the manual update of a text input

From jQuery to ReactJS: Migrating to a Modern

Is the canvas refusing to disappear?

Is it recommended to add the identical library to multiple iFrames?

Utilizing jQuery to correspond with CSS media queries

What is the best way to select a clicked span element within a div using JQuery and then adjust the spans before and after it

ESLint flagging "Unexpected tab character" error with "tab" indentation rule enabled

The console.log() displays the dictionary correctly, but trying to access it with a key results in it being undefined

Ways to Retrieve the Text From the Selected Index in Datalist Element

The pseudo-class for invalid input triggers CSS invalidation, even when the input field is left blank

Ways to access information received from AngularJS in a different Javascript file