I have a navigation menu with 2 levels built using nested lists. I need an event to only trigger on the mouseenter of the top level of the menu, not the submenu. From what I have read this should work as it should only target direct children:
$('.#primary-menu > li').mouseenter(function() {
console.log('please work');
});
However, it does not work as it triggers when the submenu items are hovered as well.
I have also seen some examples where the NOT selector is used but I cant get this working either.
$('#primary-menu:not(:has(ul.subnav))').mouseenter(function() {
console.log('please work');
});
Can anyone one help?
I have done a very simplistic example here:
https://codepen.io/lol4000/pen/VwMLOMO
//*UPDATE//
I tried the code suggestions by @CertainPerformance but this does not work for my code as I am using wordpress so I cannot add classes to the links. I tried using the .menu-item-has-children class instead but this does not work.
$('.menu-item-has-children').on('mouseenter', () => {
console.log('top-level item entered');
});
Neither does this
$('#primary-menu > li').on('mouseenter', (e) => {
console.log('top-level item entered:' + e.currentTarget.children[0].textContent);
});
Actual HTML code below:
<ul id="primary-menu" class="menu nav-menu"><li id="menu-item-4793" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4793"><a href="#" class="menu-image-title-after menu-image-not-hovered"><img width="1" height="1" src="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2021/12/Plan-de-travail-1-copie.svg" class="menu-image menu-image-title-after" alt="" loading="lazy"><span class="menu-image-title-after menu-image-title">Faculté</span></a>
<ul class="sub-menu">
<li id="menu-item-4908" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4908"><a href="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/la-faculte-2/origine-vocation-internationale/">Présentation</a></li>
<li id="menu-item-4893" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4893"><a href="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/la-faculte-2/origine-vocation-internationale/">Nos atouts</a></li>
<li id="menu-item-4892" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4892"><a href="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/la-faculte-2/">Devenir des diplômés</a></li>
</ul>
</li>
<li id="menu-item-4794" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current-menu-ancestor current-menu-parent menu-item-has-children menu-item-4794"><a href="/formations/" aria-current="page" class="menu-image-title-after menu-image-not-hovered"><img width="1" height="1" src="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2021/12/Plan-de-travail-1.svg" class="menu-image menu-image-title-after" alt="" loading="lazy"><span class="menu-image-title-after menu-image-title">Formations</span></a>
<ul class="sub-menu" style="display: none;">
<li id="menu-item-5049" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-5049"><a href="/formations/" aria-current="page">Formations</a></li>
</ul>
</li>
<li id="menu-item-4795" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4795"><a href="#" class="menu-image-title-after menu-image-not-hovered"><img width="1" height="1" src="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2021/12/DEPARTEMENTS1.svg" class="menu-image menu-image-title-after" alt="" loading="lazy"><span class="menu-image-title-after menu-image-title">Départements</span></a>
<ul class="sub-menu">
<li id="menu-item-4883" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4883"><a href="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/formations/aes-economie-gestion/">AES – Economie-Gestion</a></li>
<li id="menu-item-4884" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4884"><a href="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/formations/anglais/">Anglais</a></li>
<li id="menu-item-4895" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4895"><a href="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/formations/droit/">Droit</a></li>
<li id="menu-item-4886" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4886"><a href="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/formations/pole-international-management/">Pôle International de Management</a></li>
<li id="menu-item-4887" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4887"><a href="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/formations/langues-orientales/">ILCO</a></li>
<li id="menu-item-4888" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4888"><a href="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/formations/langues-romanes-germaniques/">LRG</a></li>
</ul>
</li>
<li id="menu-item-4796" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4796"><a href="#" class="menu-image-title-after menu-image-not-hovered"><img width="1" height="1" src="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2021/12/Plan-de-travail-1-copie-2.svg" class="menu-image menu-image-title-after" alt="" loading="lazy"><span class="menu-image-title-after menu-image-title">Vie étudiante</span></a>
<ul class="sub-menu">
<li id="menu-item-4833" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4833"><a href="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/le-campus/">Le Campus</a></li>
<li id="menu-item-4834" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4834"><a href="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/la-faculte-2/vie-associative/">Les associations</a></li>
<li id="menu-item-4897" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4897"><a href="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/le-cadre-de-vos-etudes/">Vivre au Havre</a></li>
</ul>
</li>
<li id="menu-item-4797" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4797"><a href="#" class="menu-image-title-after menu-image-not-hovered"><img width="1" height="1" src="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2021/12/Plan-de-travail-1-copie-4.svg" class="menu-image menu-image-title-after" alt="" loading="lazy"><span class="menu-image-title-after menu-image-title">Entreprises</span></a>
<ul class="sub-menu">
<li id="menu-item-4858" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4858"><a href="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/alternance/">Alternance</a></li>
<li id="menu-item-4896" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4896"><a href="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/entreprises/stages-et-offres-demploi/">Stages</a></li>
<li id="menu-item-4898" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4898"><a href="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/reprise-detudes/">Formations tout au long de la vie</a></li>
<li id="menu-item-4857" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4857"><a href="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/taxe-dapprentissage/">Taxe d’apprentissage</a></li>
</ul>
</li>
<li id="menu-item-4798" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4798"><a href="#" class="menu-image-title-after menu-image-not-hovered"><img width="1" height="1" src="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2021/12/Plan-de-travail-1-copie-6.svg" class="menu-image menu-image-title-after" alt="" loading="lazy"><span class="menu-image-title-after menu-image-title">Recherche</span></a>
<ul class="sub-menu">
<li id="menu-item-4859" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4859"><a href="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/laboratoires/">Laboratoires</a></li>
<li id="menu-item-4905" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4905"><a href="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/formations/formations-par-niveaux/doctorat/">Ecoles Doctorales</a></li>
</ul>
</li>
<li id="menu-item-4799" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4799"><a href="#" class="menu-image-title-after menu-image-not-hovered"><img width="1" height="1" src="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2021/12/Plan-de-travail-1-copie-5.svg" class="menu-image menu-image-title-after" alt="" loading="lazy"><span class="menu-image-title-after menu-image-title">International</span></a>
<ul class="sub-menu">
<li id="menu-item-4861" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4861"><a href="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/la-faculte-2/venir-etudier-au-havre/">Venir étudier au Havre</a></li>
<li id="menu-item-4862" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4862"><a href="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/partir-a-letranger/">Partir à l’étranger</a></li>
<li id="menu-item-4866" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4866"><a href="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/international-students/">International Students</a></li>
<li id="menu-item-4907" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4907"><a href="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/international/">Partenaires Internationaux</a></li>
</ul>
</li>
<li id="menu-item-4800" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4800"><a href="#" class="menu-image-title-after menu-image-not-hovered"><img width="1" height="1" src="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2021/12/Plan-de-travail-1-copie-3.svg" class="menu-image menu-image-title-after" alt="" loading="lazy"><span class="menu-image-title-after menu-image-title">Infos pratiques</span></a>
<ul class="sub-menu">
<li id="menu-item-4808" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4808"><a href="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/venir-sur-le-campus/">Venir sur le campus</a></li>
<li id="menu-item-4903" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4903"><a href="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/procedure-dadmission/">Candidater à nos formations</a></li>
<li id="menu-item-4870" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4870"><a href="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/la-vie-etudiante/services-numeriques/">Outils numériques / Services en ligne</a></li>
<li id="menu-item-4871" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4871"><a href="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/ma-rentree/">[Ma rentrée]</a></li>
<li id="menu-item-4872" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4872"><a href="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/quiz-pour-les-indecis/">FAQ</a></li>
</ul>
</li>
</ul>
from JQuery - Mouseenter / hover event on top level menu ONLY, not the submenu ( list items NOT nested list items)
No comments:
Post a Comment