Working on a bootstrap 4 dropdown menu that expands when hovered over, the goal is to prevent the link from being followed on touch-enabled devices and instead toggle the dropdown. I have successfully disabled the link, but toggling the menu remains a challenge. Below are my attempts:
JS
var button = jQuery('.btn-dropdown-link');
if ('ontouchstart' in window) {
button.click(function (e) {
e.preventDefault();
console.log('clicked / touched');
jQuery('#dropdownMenuButton').dropdown('toggle'); // struggling with this part
});
}
HTML
<ul>
<li class="btn dropdown" id="dropdownMenuButton" aria-haspopup="true" aria-expanded="false">
<a class="btn btn-dropdown-link dropdown-toggle" href="/com">some link</a>
<ul class="dropdown-menu" id="dropdownDonateMenu" aria-labelledby="dropdownMenuButton">
<li><a href="#">example</a></li>
<li><a href="#">example</a></li>
<li><a href="#">example</a></li>
</ul>
</li>
</ul>
CSS
.dropdown:hover > .dropdown-menu {
max-height: 500px;
opacity: 1;
}
.dropdown .dropdown-menu {
transition: all 0.3s;
max-height: 0;
display: block;
overflow: hidden;
opacity: 0;
min-width: 100%;
}
Here's a live example on codeply.
If you know how to toggle the dropdown after using e.preventDefault(); to disable the link focusing method, your insights would be greatly appreciated.
Edit: JavaScript solutions are preferred.