Espero que $(".menu-item-has-children").hover(...); funciona cuando el ancho de la pantalla es >= 768, y $(".menu-item-has-children").click(...) funciona cuando el ancho de la pantalla es < 768.
Intento usar resize() para verificar si el ancho de la pantalla es mayor a 768px.
El problema es que cuando abro la página con un ancho de pantalla de más de 768 px, luego la cambio de tamaño por debajo de 768 px, la función hover() sigue funcionando.
¿Cómo hago para que la función de desplazamiento funcione solo cuando el ancho de la pantalla es > 768 px?
let show = function () { try { clearTimeout(leavetimer); } catch {} entertimer = setTimeout(() => { $(this).find("ul").addClass("active"); }, 400); }, hide = function () { clearTimeout(entertimer); leavetimer = setTimeout(() => { $(this).find("ul").removeClass("active"); }, 400); }, large = $(window).width() >= 768; $(window) .resize(function () { large = $(window).width() >= 768; }) .resize(); $(document).ready(() => { if (large) { $(".menu-item-has-children").hover(show, hide); } else { $(".menu-item-has-children").click(function () { if (!$(this).find("ul").hasClass("active")) { $(this).find("ul").addClass("active"); } else { $(this).find("ul").removeClass("active"); } }); } }); .menu-item-has-children ul { display: none; } .menu-item-has-children ul.active { display: block; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="nav-bar"> <li class="menu-item-has-children"><a>class 1</a> <ul class="sub-menu"> <li><a href="#">child 1</a></li> <li><a href="#">child 2</a></li> <li><a href="#">child 3</a></li> <li><a href="#">child 4</a></li> <li><a href="#">child 5</a></li> </ul> </li> <li><a href="#">class 2</a></li> </ul>El navegador ejecuta su bloque document.ready exactamente una vez, en la carga de la página inicial. El cambio de tamaño ocurre después de que se haya ejecutado el código inicial: su evento de cambio de tamaño está allí, pero aún no le ha dicho al navegador qué hacer con él. Debe aplicar la lógica al detector de eventos para el evento de cambio de tamaño, vincular y desvincular los detectores de eventos click/mouseenter/mouseleave.
Nota: dado que la lógica de eventos es utilizada por dos oyentes separados, puede ponerla en una función separada. Eso te lo dejo a ti. ¡NO! :)
let show = function () { try { clearTimeout(leavetimer); } catch {} entertimer = setTimeout(() => { $(this).find("ul").addClass("active"); }, 400); }, hide = function () { clearTimeout(entertimer); leavetimer = setTimeout(() => { $(this).find("ul").removeClass("active"); }, 400); }, large = $(window).width() >= 768; $(window).resize(function () { large = $(window).width() >= 768; if (large) { // remove previously applied listener $(".menu-item-has-children").off('click'); $(".menu-item-has-children").hover(show, hide); } else { // equals to hover(). I suggest using .on('...') instead of .hover() $(".menu-item-has-children").off('mouseenter mouseleave'); $(".menu-item-has-children").click(function () { if (!$(this).find("ul").hasClass("active")) { $(this).find("ul").addClass("active"); } else { $(this).find("ul").removeClass("active"); } }); } }); $(document).ready(() => { if (large) { $(".menu-item-has-children").hover(show, hide); } else { $(".menu-item-has-children").click(function () { if (!$(this).find("ul").hasClass("active")) { $(this).find("ul").addClass("active"); } else { $(this).find("ul").removeClass("active"); } }); } }); .menu-item-has-children ul { display: none; } .menu-item-has-children ul.active { display: block; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="nav-bar"> <li class="menu-item-has-children"><a>class 1</a> <ul class="sub-menu"> <li><a href="#">child 1</a></li> <li><a href="#">child 2</a></li> <li><a href="#">child 3</a></li> <li><a href="#">child 4</a></li> <li><a href="#">child 5</a></li> </ul> </li> <li><a href="#">class 2</a></li> </ul>aquí está mi manera de lograr esto con la función común
var entertimer; var leavetimer; let show = function () { try { clearTimeout(leavetimer); } catch { } entertimer = setTimeout(() => { $(this).find("ul").addClass("active"); }, 400); }, hide = function () { if (entertimer) { clearTimeout(entertimer); } leavetimer = setTimeout(() => { $(this).find("ul").removeClass("active"); }, 400); }, large = $(window).width() >= 768; $(window).resize(function () { large = $(window).width() >= 768; change(); }).resize(); $(document).ready(() => { change(); }); function change() { if (large) { $(".menu-item-has-children").hover(show, hide); $(".menu-item-has-children").unbind('click'); } else { $(".menu-item-has-children").unbind('click'); $(".menu-item-has-children").click(function () { $(".menu-item-has-children").unbind('mouseenter mouseleave'); console.log('$(this).find("ul")', $(this).find("ul")) if (!$(this).find("ul").hasClass("active")) { $(this).find("ul").addClass("active"); } else { $(this).find("ul").removeClass("active"); } }); } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style> .menu-item-has-children ul { display: none; } .menu-item-has-children ul.active { display: block; } </style> </head> <body> <ul class="nav-bar"> <li class="menu-item-has-children"><a>class 1</a> <ul class="sub-menu"> <li><a href="#">child 1</a></li> <li><a href="#">child 2</a></li> <li><a href="#">child 3</a></li> <li><a href="#">child 4</a></li> <li><a href="#">child 5</a></li> </ul> </li> <li><a href="#">class 2</a></li> </ul> </body> </html>