I can't seem to figure out why my pop-up menu in jQuery is acting so strange and unpredictable.
The menu is supposed to appear on a toolbar located at the bottom of the window when clicked (not hovered). It should then disappear again when: a) a menu item is clicked, b) the toolbar button that opened it is clicked again, c) or when anything else on the page is clicked.
Initially, everything was working perfectly, but now it's falling apart. I've encountered a frustrating glitch...
Here is what's happening:
- I load the page
- I click the first menu button, and it pops up as expected.
- I click the second menu button, and it pops up while the first one that was open closes.
- Keeping the second menu open, I click the first one again. Oh no! The second menu remains open too! Now both are open simultaneously!?!
- When I click something else on the page to hide the menus, only the first one disappears. The second one stubbornly stays open. I have to click its menu button to make it go away.
Help, please!!! Here is the link to my jsFiddle:
And this is the JavaScript I'm using:
var togglemenu = null;
function fn_togglemenu(datatarget) {
$('.bottom-menu-bg ul li ul[data-target="' + datatarget + '"]').slideToggle(function() {
togglemenu = $(this).is(':visible') ? datatarget : null;
$('.bottom-menu-bg ul li ul[data-target="' + datatarget + '"]').parent('li a').toggleClass('hover');
});
}
$(document).ready(function() {
$('.bottom-menu-bg ul li a').click(function(ev){
ev.preventDefault();
fn_togglemenu($(this).attr('data-target'));
});
$(document).click(function(ev){
if(togglemenu != null) {
fn_togglemenu(togglemenu);
}
});
});
There is too much code to include inline realistically.