After some investigation, it seems that the issue I encountered was not directly related to my code. Interestingly, when I click the link in the navigation bar, it redirects to "mobile/folder/page.html" on all browsers except for Chrome. In Chrome, however, it opens a different URL path ("/mobile/#/mobile/folder/page.html"), which causes it to malfunction. If I manually navigate to the page, everything works as expected. Does anyone have a solution for this?
While my code functions smoothly across various browsers and Android devices, I'm facing compatibility issues specifically on iPhones. I've experimented with using 'tap' and 'touch' events instead of 'onClick', switching to 'toggle' rather than 'hide' and 'show', incorporating onClick in CSS, and including cursor:pointer in CSS properties, but none of these adjustments have resolved the problem. Any guidance would be greatly appreciated!
https://jsfiddle.net/anthonyparrett7/0bmw79yw/
$(document).ready( function() {
/* Question and Answer Dropdowns */
$(".dropdown-link").click(function(e) {
e.preventDefault();
var $div = $(this).next('.dropdown-container');
$(".dropdown-container").not($div).hide();
if ($div.is(":visible")) {
$div.hide()
} else {
$div.show();
}
});
$(document).click(function(e){
var p = $(e.target).closest('.dropdown').length
if (!p) {
$(".dropdown-container").hide();
}
});
});