我正在尝试在移动设备上使用一个功能(在此示例中小于700px),在大型设备上使用另一个功能。我通过以下方式使用matchMedia:
var mql = window.matchMedia("(min-width: 700px)");
mql.addListener(handleResize);
handleResize(mql);
function handleResize(mql) {
if (mql.matches) {
$(".button").on("click", function(){
$(".hidden").slideToggle();
})
} else {
$(".button").on("click", function(){
$(".hidden").fadeToggle();
})
}
}
首先,代码的行为符合预期,当我调整窗口大小时会出现问题。例如,如果窗口首先加载小于700px,然后将其调整为大于700px,则按钮首先触发淡入淡出,然后滑动,反之亦然。我要实现的目标是仅在大屏幕上调用幻灯片,而在小屏幕上仅淡入淡出。任何帮助是极大的赞赏。
干杯!
最佳答案
问题在于,每次触发handleResize
回调时,它都会将另一个click事件附加到按钮上。为避免产生大量事件,您必须先使用off()
将其删除。
这是一个满足您需要的示例:
var $hidden = $('.hidden');
var $btn = $('button');
var mql = window.matchMedia("(min-width: 700px)");
function bindSlide() {
// Using `off()` is required in order not to end up attaching a lot of callbacks
$btn.off("click.mql").on("click.mql", function() {
$hidden.stop().slideToggle();
});
}
function bindFade() {
$btn.off("click.mql").on("click.mql", function() {
$hidden.stop().fadeToggle();
});
}
function handleScreen(mql) {
if (mql.matches) {
bindSlide();
} else {
bindFade();
}
}
// Handle media query 'change' event
mql.addListener(handleScreen);
handleScreen(mql);
请注意,并非所有浏览器都支持
window.matchMedia
。对于本机不支持matchMedia的浏览器,您可以使用polyfill:https://github.com/paulirish/matchMedia.js实时示例:http://jsfiddle.net/rhkLng9o