需要一些帮助。我正在使用jQuery与媒体查询结合使用我的标题的一些响应方面。我的客户端希望标题响应于设备和手动调整窗口大小。因此,我已将所有响应函数都设置在单个函数中,然后将这些相同的函数设置在$(window).on(' resize',函数)中。感谢另一张海报,我得到了一个提示,将我的响应函数包装在变量中,然后将该变量传递给resize函数,而不是重写它。这是一个很棒的提示,对我来说是一个很好的学习中间javascript作家。但是当我这样做时,代码在resize函数中不起作用。如果我输入完全相同,它工作正常。但如果我通过该功能它不起作用。有人可以帮忙吗?代码如下:
var win = $(window);
var mainNav = $('.main-nav');
var navItem = $('.main-nav li');
var overlay = $('.nav-overlay');
var header = $('#header');
var subNav = $('.main-nav ul ul');
var overlayIsVisible = false;
var subNavIsVisible = false;
var exitMain = $('.exit-main');
var topNav = $('.top-nav');
var hamburger = $('.tablet-buttons .hamburger');
var exit = $('.tablet-buttons .exit');
if ( header.is('*') ) {
navItem.hover(function() {
overlay.fadeIn('slow');
$(this).find('ul').toggleClass("active");
overlayIsVisible = true;
});
exitMain.click(function() {
overlay.fadeOut('fast');
overlayIsVisible = false;
});
function tabletNav() {
if (win.width() <= 1024) {
topNav.prependTo(overlay);
hamburger.click(function() {
overlay.fadeIn('slow');
hamburger.css('display', 'none');
exit.fadeIn('slow');
});
exit.click(function(){
overlay.fadeOut('slow');
exit.css('display', 'none');
hamburger.fadeIn('slow');
});
}
else{
topNav.insertAfter('.logo');
}
};
/*This makes the above Mobile/Tablet functions also work on resize of window*/
win.on('resize', tabletNav());
};