用js加载导航栏，然后用js激活导航栏内的下拉菜单

Question

I am trying to load the NavBar for each html page, instead of copy and pasting it into multiple html pages. This works fine, however I also have another function to activate the dropdown menu of the NavBar on hover, this function is not working. How do I get this to work?

HTML:

<div id="nav"></div>

JS:

$(document).ready(function(){

// Loading NavBar
$("#nav").load("nav.html");


// Activating dropdown menu
$(".top-nav-item").hover(            
    function() {
        $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true);
        $(this).toggleClass('open');        
    },
    function() {
        $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true);
        $(this).toggleClass('open');       
    }
);

});

Answer 1

You could use:

dropDownMenu.onmouseover = function() {codeToOpenDropDownMenu};

and for closing:

dropDownMenu.onmouseout = function() {codeToCloseDropDownMenu};