Question

我有一个包含四个菜单项的菜单，如下所示：

<div class="grid flex bottom-menu">
			<div class="col_3 center-block">
				<div class="col_3 center-block left-block"><a href="./views/experts.html"><h2>Learn from Experts</h2></a></div>
			</div>
			<div class="col_3 center-block">
				<div class="col_3 center-block left-center-block"><a href="./views/join-the-community.html"><h2>Join the Community</h2></a></div>
			</div>
			<div class="col_3 center-block">
				<div class="col_3 center-block right-center-block"><a href="./views/upcoming-events.html"><h2>Upcoming Events</h2></a></div>
			</div>
			<div class="col_3 center-block">
				<div class="col_3 center-block right-block"><a href="./views/past-events.html"><h2>Past Events</h2></a></div>
			</div>
		</div>

菜单项的标题长度不一样，所以在较小的屏幕上，某些菜单标题在2行而其他标题不在，我希望<div>持有较短的标题无论如何要生长所以不要显示它们背后的白色空间。我使用jQuery这样做：

	//make main menu dynamically change height
	var originalHeight = $('.bottom-menu').prop('scrollHeight');
	$(window).resize(function () {
		var tallestMenuBlock = $('.bottom-menu').prop('scrollHeight');
		if ($(window).width <= 780) {
			$('.center-block').height(originalHeight);
		}
		if ($(window).width() > 780 && $(window).height()) {
			$('.center-block').height(tallestMenuBlock);
		} 
		if (!$(window).width() > 780 && !$(window).height()) {
			$('.center-block').height(originalHeight);
			$('.bottom-menu').height(originalHeight);
		}
			console.log(tallestMenuBlock, 'GGGG', $(window).width(), 'LLL', originalHeight);
		
	});

你can view the full custom.css file here。这是相关的CSS：

.bottom-menu {
	  overflow: hidden;
}

.center-block  {
	margin: 0 0 0 0;
	width: 25%;
}

.center-block h2 {
	color: #FFF;
	text-align: center;
}

.left-block {
	background-color: rgba(218, 59, 1, 0.6);
	width: 100%;
}

.left-block-hover {
	background-color: rgba(218, 59, 1, .8);
}
.left-center-block {
	background-color: rgba(180, 0, 158, .6);
	width: 100%;
}

.left-center-block-hover {
	background-color: rgba(180, 0, 158, .8);
}
.right-center-block {
	background-color: rgba(255, 185, 0, .6);
	width: 100%;
}

.right-center-block-hover {
	background-color: rgba(255, 185, 0, .8);
}

.right-block {
	background-color: rgba(232, 17, 35, .6);
	width: 100%;
}

.right-block-hover {
	background-color: rgba(232, 17, 35, .8);
}

当屏幕缩小时，这会增加较短标题周围div的高度以匹配其他标题，没问题。问题是，当我将窗口缩小到标题移动到2行的位置后重新增加窗口大小时，菜单div保持在较高的高度并且不会将其高度降低到原始高度。

我一直试图让这项工作暂时无法找到我做错了什么，所以任何帮助都会受到赞赏。如果您想查看整个项目，可以在我的GitHub Repo上看到我正在处理的特定html文件can be found here

Answer 1

在您的第一个if声明中，您有$(window).width，但它应该像其他人一样$(window).width()。

此外，要使菜单高度恢复到原始高度，您需要捕捉它们的高度而不是.bottom-menu的高度。此外，您应该使用.height()：

var originalHeight = $('.center-block').height();

JS Fiddle

或者你可以将他们的身高改为自动：

$('.center-block').css('height', 'auto');

JS Fiddle

附加说明：

我不确定$(window).height()应该做什么，因为没有条件。

最后，我建议media-queries而不是使用JS。

Answer 2

@ dwreck08是对的，我需要使用媒体查询，这就是诀窍：

＆＃13;

@media all and (min-width: 780px) and (max-width: 1360px) {
	.left-block {
		height: 140px;
	}
	.left-center-block {
		height: 140px;	
	}
	.right-center-block {
		height: 140px;	
	}
	.right-block {
		height: 140px;	
	}
}

＆＃13;

jQuery .height（）增加高度，但不会降低高度

2 个答案: