在调整大小时,它不会更新高度。一旦负载设置了它的高度,尽管我更新了变量,它仍然不会更新。
如果我取出设置高度的线条,那么我的变量会更新,但是一旦设置了高度,它就不会做任何事情。
我哪里出错?
var hero_height = $('.hero-image').outerHeight();
console.log('heroHeight: ' + hero_height);
$(document).ready(function() {
$(window).load(function() {
$('.hero-image').css('height', hero_height );
});
$(window).resize(function() {
if (hero_height !== $('.hero-image').outerHeight()) {
$('.hero-image').css('height', hero_height );
};
hero_height = $('.hero-image').outerHeight();
console.log('heroHeight: ' + hero_height);
});
});
这是一个JS小提琴 https://jsfiddle.net/5c1za6xa/
答案 0 :(得分:1)
在窗口调整大小功能中包含var hero_height = $('.hero-image').outerHeight();
。
$(window).resize(function() {
var hero_height = $('.hero-image').outerHeight();
if (hero_height !== $('.hero-image').outerHeight()) {
$('.hero-image').css('height', hero_height );
};
hero_height = $('.hero-image').outerHeight();
console.log('heroHeight: ' + hero_height);
});
答案 1 :(得分:0)
你过分思考这个!你根本不需要jQuery,只需要CSS media queries。
这是一个例子
nav {
display: block;
}
@media screen and (max-width: 480px) {
nav {
display: none;
}
}
这将隐藏移动设备上的导航栏(或技术上,屏幕高度小于480px的任何内容)。您可以显然更改最大宽度和样式以满足您的需求。由于多种原因,这远远优于jQuery