As a beginner in web development, I am currently facing a challenge when it comes to managing hover effects on devices like iPads. Initially, my solution was to remove the CSS for hover and replace it with click events, but my client prefers to keep the hover functionality.
The issue arises with the Bootstrap navbar I have in place, which contains dropdown menus that activate on hover. On an iPad, however, the menu drops down only after clicking on a menu item (e.g. "learn") and does not disappear until another navigation item (e.g. "teach") is clicked.
I would like to use JavaScript/jQuery to achieve the following:
Maintain current hover behavior on desktops and laptops
On devices like iPads, ensure that the menu disappears under specific conditions:
(a) When the same menu item is clicked again
(b) When a submenu is clicked
(c) When the user clicks outside of the menu
Any assistance on this matter would be greatly appreciated.
Here is the fiddle: http://jsfiddle.net/em656522/2/