Ok, I think I got this worked out. I'll post this here in-case anyone else ever looks no need it in the future.
~This requires the mobile jquery library~
This took me almost two days to figure out, but I'm new to jquery/javascript so it may be a little sloppy. I'm always open to simplifying this if I can. This is great for wordpress as it builds off the rebuilt menu's
//this is the touch screen mainMenu function
$(function touchNav() {
$(function mainMenu () {
$(document).on('vmousedown', 'li', function(e) {
var jthis = $(this);
var jchildren = jthis.children('ul.sub-menu');
if (e.target !== this) {
return;
} else {
jthis.siblings().find('ul.sub-menu').slideUp('fast');
jchildren.slideToggle('slow');
}
setTimeout(function() {
if (jchildren.css("display") == "none") {
jthis.find(".sub-menu").css("display", "none");
};
}, 700);
});
});
//if click is not on mainMenu closeNav
$(document).on('vmousedown', function (e) {
var jcontainer = $("#mainMenu");
if (!jcontainer.is(e.target) && jcontainer.has(e.target).length === 0)
{ jcontainer.find("ul.sub-menu").slideUp();
}
});
});