Add clickable arrows to parent menu items with children elements e.g. with
I am currently working on a website with a custom theme where the following behaviour should be possible for the mobile version:
The navigation can be opened via a hamburger button. Then all parent elements are displayed. The parent elements that have children have an arrow pointing downwards to the right of the menu name. Those that do not have children do not have an arrow. This would actually be easy to solve with CSS. However, I would like to make the arrows clickable, i.e. if you click on the menu name of the parent element, the browser loads the corresponding page. But if you click on the arrow, the submenus of the parent element are displayed or they are slid down with jQuery, for example. So when you click on the arrow, no new page is loaded yet, but the children elements are displayed in the navigation below the parent element.
Does anyone have an idea how this could be done?