What is the current situation:
- A button is clicked by the user
- The menu opens (list items display = block)
- The function to close the menu is connected to the
<body> - The function to close the menu is immediately triggered, causing the menu to close
I am associating a function with closing the menu (hiding the list items) to the body so that after opening the menu, the user can close it by clicking anywhere on the screen outside of it.
The issue arises when the function attached to the body is automatically activated within the button click event, leading to the menu opening and closing before being visible to the user.
In my implementation, I am utilizing jQuery 1.7's .on() method to bind the event.
Is there a straightforward solution to this dilemma? Perhaps something like 'bindAfterEvent'?
Here is the relevant code snippet:
$(document).ready(function() {
$('#page-content div.center-block div:nth-child(1) ul li:nth-child(1)').on('click', openSubnav);
});
openSubnav = function(e) {
// Displays all list items and links the close function to the body
e.preventDefault();
$('#page-content div.center-block div:nth-child(1) ul li').show();
$('body').on('click', closeSubnav);
};
closeSubnav = function() {
// Hides all list items except the first one used for opening
$('#page-content div.center-block div:nth-child(1) ul li').hide();
$('#page-content div.center-block div:nth-child(1) ul li:nth-child(1)').show();
};