Change hover to click function after resize screen
تبليغسؤال
يرجى شرح بإيجاز لمإذا تشعر أنك ينبغي الإبلاغ عن هذا السؤال.
I hope $(“.menu-item-has-children”).hover(…); works when screen width >= 768, and $(“.menu-item-has-children”).click(…) works when screen width < 768.
I try to use resize() to check if the screen width larger than 768px.
The problem is when I open the page with the screen width over 768px, then resize it under 768px, the hover() function still work.
How do I make the hover function works only when screen width > 768px ?
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();
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>
أضف إجابة