[英]Change transition type depending on screen size
基本上,代码应该执行的操作-如果网站大小大于750像素,则下拉菜单会随着鼠标悬停效果而下滑,但如果其小于750像素的下拉菜单会在点击切换时起作用。
我检查媒体查询是否已更改(大于750px浮点==左)以及是否(小于750 px浮点==无)更改了(如果我以650 px的网页宽度开始,但在我将其调整为全屏尺寸时可以使用onclick切换)然后返回到650像素,它显示为悬停和onclick切换,而不仅仅是单击切换。
任何人都可以解释我在做什么错? 我对jQuery很陌生。
提前致谢!
$(document).ready(function() {
checkSize();
$(window).resize(checkSize);
});
//Function to the css rule
function checkSize() {
if ($("#drop > li").css("float") == "none") {
$('#dropdown-btn').click(function() {
$('.dropdown').slideToggle(200);
});
} else if ($("#drop > li").css("float") == "left") {
$('#dropdown-btn').hover(
function() {
$('.dropdown').slideDown(200);
},
function() {
$('.dropdown').slideUp(200);
}
);
}
};
我认为您的问题是事实,您的checkSize函数每次触发一次都会绑定一个事件,这在调整大小上有很多。 更好的方法是摆脱大小调整函数,并在事件中使用if语句,如下所示:
$(document).ready(function() {
$('#dropdown-btn').on('click',function() {
if($("#drop > li").css("float") == "none"))
$('.dropdown').slideToggle(200);
});
$('#dropdown-btn').on({
mouseenter: function () {
//stuff to do on mouse enter
if ($("#drop > li").css("float") == "left")
$('.dropdown').slideDown(200);
},
mouseleave: function () {
//stuff to do on mouse leave
if ($("#drop > li").css("float") == "left")
$('.dropdown').slideUp(200);
}
});
您还应该使用jQuerys on()
函数而不是hover()
或click()
。
参考: http : //api.jquery.com/on/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.