jQuery of menu is not loading after clicking outside the menu

Question

I am using Bootstrap dropdown menu. See the below code:

$(document).ready(function(){
       $("#a-primary-occasion").mouseover(function(){
          $(".dropdown-menu_occasion").css("display", "block");
       });
       $('#submenu-birthday_occasion').mouseover();
    });

This script is in main menu's phtml file which works fine when the page is loaded. But after clicking outside menu (on other content of the page.) it doesn't fire the mouseover() event.

You can check it here: http://jshri.com

• After loading the page just hover on the first menu (Occasion). It will open the submenu of "Birthday Gifts".

• click on anywhere outside the menu (e.g above "Occasion" menu)

• hover on Occasion menu it won't open the first menu. Also hovering on the first submenu (i.e. Birthday Gifts) won't it. But after hovering on the second submenu (i.e. Anniversary Gifts) will open the submenu also the hover even for the first submenu will work fine afterwards.

Note: If I add an alert in document.ready() it fires every time.

I am not sure why is this happening. Does anyone have any idea? How can I solve this?

Answer 1

I found it myself!

As I said I am using Bootstrap menu, by default menu was opening on click events. Which I changed to hover event. But I didn't remove the jQuery which was hiding the current opened menu on document.click event. This is the code I commented:

$(document).click(function() {
        // Simply hide the submenu on any click. Again, this is just a hacked
        // together menu/submenu structure to show the use of jQuery-menu-aim.
        $(".popover_relation").css("display", "none");
        $("a.maintainHover_relation").removeClass("maintainHover_relation");
    });