In Dropdown Menu parent element is not clickable

[adrianwebdesign]

Thanks!

[mherrera1987]

@adialbu How you solve this?

[AlexWebLab]

On Bootstrap the parent item of a dropdown menu is, by design, clickable only to open the dropdown and not as a link.

Here is the short version of why:

In Bootstrap, we use a mix of both hover and click though–hover for tooltips and popovers, clicks for dropdowns and more. What it really boils down to is user intent. The purpose of a hover state is to indicate something is clickable (underlined text) or to provide some quick information (full URL in a tooltip). The purpose of a click is to actually do something, to take an explicit action. Opening a dropdown is an explicit action and should only happen on click.

Here is the long version, explained directly from the author of Bootstrap: https://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/

[adrianwebdesign]

I solved it with the code below

<script type="text/javascript"> //Fix bootstrap dropdown parent click let clicked = 0; document.querySelector('.dropdown-toggle').addEventListener('click',(e)=>{ clicked++; if(clicked > 1 && e.target.classList.contains('show')){ location.href = e.target.href clicked = 0; } }) </script>