0

I just don't know how to make mouseenter event on trigger on certain element and to perform an action on the other. Here is the thing, i'm trying to make an dropdown menu but not in an ordinary way (submenu nested in an li of the main menu) but to make submenu appears bellow main menu when mouse enters zone of a certain element and submenu should hide when mouse leaves area of submenu. Mouseenter just does not trigger when mouse enters zone of desired element of the main menu. (I tried with console.log but the event just isn't triggering) It's really annoying because mouseleave normally triggers when I deleted initial property display: none, to display submenu initially and when I left area of submenu event worked properly and submenu hid. Does anybody know what the solution is?

Function that generates code, annoying events and HTML:

    function showMenu(menuJsonData){
    var writingMenu = "";
    var writingSubmenu = "";
    for (partOfMenu in menuJsonData){
        if(menuJsonData[partOfMenu].primaryHref!="#"){
            writingMenu+=`<li>
                            <a href="${menuJsonData[partOfMenu].primaryHref}" class="whiteColor linkMarginLeftRight">${menuJsonData[partOfMenu].primaryLabel}</a>
                        </li>`;
        }
        else {
            writingMenu+=`<li id="includesSubmenu">
                            <a href="${menuJsonData[partOfMenu].primaryHref}" class="whiteColor linkMarginLeftRight">${menuJsonData[partOfMenu].primaryLabel}<span class="fa fa-chevron-down" aria-hidden="true"></span>
                            </a>
                        </li>`;
            for (partOfSubmenu in menuJsonData[partOfMenu].secondaryHrefs){
                                    writingSubmenu+=`<li>
                                                     <a href="${menuJsonData[partOfMenu].secondaryHrefs[partOfSubmenu]}" class="whiteColor linkMarginLeftRight">${menuJsonData[partOfMenu].secondaryLabels[partOfSubmenu]}</a>
                                                 </li>`;
            }
            document.querySelector("#submenu").innerHTML=writingSubmenu;
        }
    }
    document.querySelector("#menu").innerHTML=writingMenu;
}
 $("#includesSubmenu a").mouseenter(function(){
    console.log('Clint Eastwood');//event doesn't trigger
   $("#submenu").parent().parent().removeClass("displayNone");
 });
 $("#submenu").mouseleave(function(){
console.log('Al Pacino');// event does trigger
     $("#submenu").parent().parent().addClass("displayNone");
});
<header class="width100 redBackgroundColor positionFixed">
            <div class='wrapper displayFlex justifyContentSpaceBetween marginAuto'>
                <div id='logo'>
                    <img src='assets/img/logo.png' alt='Logo of The Greatest Gift'/>
                </div>
                <nav>
                    <ul id="menu" class='displayFlex justifyContentSpaceBetween menuCenter'></ul>
                </nav>
            </div>
            <div class="width100">
                <div class="wrapper marginAuto">
                    <ul id="submenu" class="displayFlex justifyContentFlexEnd"></ul>
                </div>
            </div>
        </header>
  • before the mouseenter could you display the value of `$("#includesSubmenu a").length`? – Frenchy Feb 14 '21 at 20:03
  • Well, there is only one li in the menu that has id="includesSubmenu" and that element has only one nested a so I assume that length would be 1. –  Feb 14 '21 at 20:07
  • THANKS A LOT! I'm stuck all day long with this problem and now it's working. –  Feb 14 '21 at 20:32

0 Answers0