I have a complex navigation menu structure with nested lists, and I'm struggling to trigger an event only on the top-level items when hovered. Despite trying different jQuery selectors and methods, such as using the NOT selector or targeting direct children, I haven't been successful.
$('.#primary-menu > li').mouseenter(function() {
console.log('please work');
});
The code above triggers the event for submenu items too, which is not the intended behavior.
If anyone can provide guidance or solutions, it would be greatly appreciated.
For reference, here's a simplified example:
https://codepen.io/lol4000/pen/VwMLOMO
//**UPDATE**//
I attempted suggestions by @CertainPerformance but ran into issues due to the limitations of the WordPress platform. Using the .menu-item-has-children class instead also didn't yield the desired results.
$('.menu-item-has-children').on('mouseenter', () => {
console.log('top-level item entered');
});
An alternative approach like the one below also didn't achieve the desired outcome:
$('#primary-menu > li').on('mouseenter', (e) => {
console.log('top-level item entered:' + e.currentTarget.children[0].textContent);
});
Here's a snippet of the actual HTML code:
[Actual HTML code would go here]