Currently in the process of developing my website, using Bootstrap and Javascript (including jQuery).
I have a navigation menu bar featuring a dropdown menu that should slide down upon hovering on mouse-enabled devices, and otherwise activate upon click/touch on touchscreens.
Unfortunately, it doesn't seem to be working as expected on Safari, particularly on iPads. However, it does work properly on other browsers for PCs.
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
360 Image <b class="caret"></b>
</a>
<ul class="dropdown-menu mega-menu">
...
</div>
</li>
I have experimented with both onclick="void(0)" and touchend events, even though I was initially unfamiliar with the latter:
$('.dropdown-toggle').on("click tap", function(e) {
// $(this).next('div').slideToggle('normal');
if ($(this).parent().hasClass('open')) {
$(".dropdown").removeClass("open");
console.log('opened');
return true;
}
if (!$(this).parent().hasClass('open')) {
$(this).next('div').slideToggle('normal');
// $(".dropdown").addClass("open");
console.log('not open ');
return true;
}
}
Despite extensive research online, I have not been able to resolve this issue.