jQuery调整大小以响应的问题
jQuery调整大小以响应的问题
提问于 2015-02-28 13:34:07
我正在为一个新站点编写一个标题，并且在使用jquery (与媒体查询相结合)进行响应时遇到了一些问题。我的客户端希望头响应两个断点，但也希望窗口手动调整大小。某些元素是隐藏的，显示为1024 on窗口大小，但我希望在平板电脑加载标题和调整窗口大小时都出现这种情况。我的jQuery如下..。
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 deviceWidth = win.width();
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;
})
if (win.width() <= 1024) {
topNav.prependTo(overlay);
mainNav.prependTo(overlay).insertAfter(topNav);
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', function(){
if (win.width() <= 1024) {
topNav.prependTo(overlay);
mainNav.prependTo(overlay);
}
else {
topNav.insertAfter('.logo');
mainNav.prependTo(header);
}
});
};有更简单的方法来完成这个任务吗？是否有一种方法，我可以只写我的函数一次，以便它们将发生在窗口大小和加载。任何帮助都是非常感谢的。谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-02-28 15:05:00
您只需在保存到变量的函数中定义调整大小的逻辑，然后就可以根据需要将其连接到任意多的事件，而不必重新键入它。
匿名函数是很棒的，因为您可以根据需要定义和传递它们。
Var resize = function() {
ResizeStuff
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28782283
复制相关文章
相似问题
腾讯云开发者
