The menubar has a "My Profile" menu which has a submenu that consists of several items.
When I click on the "My Profile" menu then its submenu should appear repeatedly times
when the user hover over it with the mouse which is the general way. But as it is now, this
event gets triggered only once per page load and I can't understand why?
Below is the code for my drop down component it is hardly commented but I hope that a viewer
still will get a clear idea of what is going on. If the html markup is required as necessary material
Please forgive for maybe a badly described issue. I am a little bit stressed out over this.
Thank you very much in advance!
On a quick inspection, I don't see anything glaring, except that it does strike me that the code is fairly over-complicated for what it aims to do. Simpler code is easier to debug and less prone to fragility, so I'd advise refactoring with the following approach:
Assign the elements to be assigned a click handler a common class name, and use the class name to find the elements rather than digging down through the hierarchy (which is always very fragile).
Use addEventLister to establish the click event handlers rather than the onClick property of the elements.
If the problem persists, we can further diagnose.
By any chance are the elements destroyed and replaced elsewhere in the code (e.g. after an Ajax call)?
id values have the disadvantage that you can only have one element with a specific id value, so that's not of any use to you in this case where you have multiple elements you wish to establish the event handler for. So class names are the appropriate mechanism.
For example, you could use class="menu-item" on each element, then collect them all using getElementsByClassName.