jQuery Menu shuts down with a .slideToggle load when clicked away from the menu

I have encountered similar questions regarding my menu open/close functionality, which is operated by slideToggle() instead of a class. I prefer not to modify my CSS to make it functional.

The requirement is for the menu to close when the user clicks anywhere else on the page.

HTML:

<div class="select">
    <button class="select__selector">Reveal menu</button>
    <ul class="select__select">
        <li class="select__option"><a></a></li>
        <li class="select__option"><a></a></li>
        ...
    </ul>
</div>

JS:

var langTrigger = jQuery('.select__selector');
var langList = jQuery('.select__select');

// Trigger active state.
langTrigger.click(function() {
    langTrigger.toggleClass('open');
    langList.slideToggle(200);
});

// Close list when the page is loading.
langList.click(function() {
    langTrigger.click();
});

I have experimented with various options, but this is the closest solution I have found.

if((langTrigger).hasClass('open')) {
     jQuery('body').on('click', function() {
         langList.css({display: 'none'});
     });
}

Answer №1

Include a div element and position it to cover your entire website in the following manner:

<div class="overlay"</div>

.overlay{
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

Next, implement something along these lines:

    $('.opensmenu').click(function(){
         $('.menu').toggle();
         $('.overlay').show();
    });

    $('.overlay').click(function(){
         $('.menu').hide();
         $(this).hide();
    });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Learn the process of customizing the border color of a drop-down menu using

Is there a way to add validation to a drop-down menu so that the border color turns red if an option is not selected? $("#MainContent_ddlSuppliers option:selected'").css("border", "1px solid #F78181"); ...

The issue with Bootstrap Vue is that it fails to render the CSS properly when utilizing cards

Recently, I delved into the world of Bootstrap Vue and wrote the code snippet below: <template> <div> <div> <b-card-group> <b-card border-variant="dark" header="Dark" align="center"> &l ...

Learn how to customize the background color of the DropdownToggle when a DropdownItem in Bootstrap 4 is clicked

Is it possible to modify the background color of DropdownToggle when selecting DropdownItem? Additionally, is there a way to adjust the top and bottom blue borders when clicking DropdownToggle? Picture 1: The image depicts the initial appearance before se ...

Adjust the size of an iFrame's content according to the dimensions of the iFrame

I am looking to use an iFrame for embedding a map, and my goal is to resize the map according to the values in the iFrame tag. Most tutorials I have found focus on auto-sizing the iFrame based on content, which is not what I need. Just to make it clear, I ...

AlpineJS causes jQuery & Bootstrap to fail to load after being loaded

Everything was smooth sailing with my bootstrap, livewire, and jQuery before I introduced AlpineJS. But now, the browser is constantly throwing Uncaught TypeErrors at me. I even tried tweaking the script to load AlpineJS alongside the other libraries, but ...

HTML elements are positioned in alignment

I'm currently working on a website and I need some assistance in aligning my images properly. Here's what I have tried: https://i.sstatic.net/suIVu.png However, I haven't been able to achieve the desired result with the following code: &l ...

implementing individual toggle functionality for each element using jQuery

I need a solution to show/hide multiple paragraphs and links independently. <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> ...

How to iterate through a "for" loop in JavaScript using Python-Selenium?

In my current project, I am utilizing Javascript to gather data from an HTML page using Selenium. However, I am facing a challenge where I am unable to execute the multi-line for loop in the Javascript portion on my computer through Selenium with Python (S ...

Close the modal when the submit button is clicked and the Ajax request is successful

I have encountered a similar issue to others on StackOverflow, but I am struggling to implement the suggested solutions in my specific case. Currently, I have a modal in my view: <div id="createFolderModal" class="modal"> <div class="modal-dialo ...

Contrast the positions (offsets) of two elements

I am trying to determine if one element is positioned above another by comparing their offset positions. Specifically, I need to verify whether the me element is within the bounds of the screen element using their respective offset positions. HTML Code ...

The curious case of jQuery.parseJSON() failing to decode a seemingly valid Json string on a Windows-based server

I am currently running a WordPress JavaScript function code on a Linux server that also includes a PHP function called "get_form_data". jQuery.ajax({ type: "POST", url: MyAjax.ajaxurl, data: {action: "get_fo ...

Let's apply some CSS to the font style within the body

I've been incorporating a "footer.php" page into all other pages of my website. This footer showcases the site's name at the bottom of the screen and uses a custom font loaded with @font-face. Initially, I had something like this placed inside t ...

Troubleshooting disappearing values in POST request using ajax and jQuery serialize() method

When I make a post request, I am only able to retrieve two out of four values. I am expecting to get the id, step, name, and email from the form but the only ones I receive are from the hidden inputs. It seems like the jQuery serialize() function might be ...

A guide on using jCrop to resize images to maintain aspect ratio

Utilizing Jcrop to resize an image with a 1:1 aspect ratio has been mostly successful, but I've encountered issues when the image is wider. In these cases, I'm unable to select the entire image. How can I ensure that I am able to select the whole ...

Encountering a 400 (Bad Request) error while attempting to submit a form to Facebook using Ajax and jQuery

I need help with posting an image to a Facebook album using a form on my website. I have the correct access token and know that posting without jQuery or AJAX works, but it redirects me away from my site. To fix this, I attempted a jQuery AJAX post, but en ...

Tips for Customizing the Active Class in Bootstrap 3

After spending the last 3 days searching online and trying various examples, I still can't figure out how to style the active class properly. Below is the HTML code snippet: <div class="navbar navbar-inverse navbar-fixed-top" id="mainHeader" ...

Error Icon Displayed Incorrectly in Dynamically Generated List Items in Phonegap Android App

My attempt to dynamically create a list item with JSON response and set the data-icon to "check" is not working as expected. The result always shows "arrow-r" data-icon instead. This is how I generate the list item: function CallvarURL(url) { var res ...

Tips on sending a JSONP token with an AJAX request

I have been researching JSONP online, and I came across information stating that JSONP requires a token. To adhere to this requirement, I added "product" in front of my JSON code. However, I am unsure if this is the correct format for JSONP. Please let me ...

What is the best way to overlay my slider with a div containing content?

In the hero section of my website, there is a slider with 3 slides. I am looking to add a div element that will display content over these slides at all times, regardless of which slide is currently showing. ...

CSS alone has the power to make multiple elements react to a hover action on a div

Is there a way to dynamically change the size of multiple div elements on hover? In this example, we can see how one div element's size changes when hovering over another div element: https://jsfiddle.net/9510a6kj/ .left, .right{ float:left; ...