jQuery .height()增加高度，但不会降低高度

jQuery .height() increases height, but won't reduce height

本文关键字：高度 增加 jQuery height      更新时间：2023-09-26

我有一个包含四个菜单项的菜单，看起来像这样:

<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> s保持较短的标题生长，这样就不会显示它们背后的空白。我使用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);
		
	});

你可以在这里查看完整的custom.css文件。下面是相关的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文件可以在这里找到

在您的第一个if语句中，您有$(window).width，但应该像其他语句一样是$(window).width()。

另外，为了使菜单div的高度恢复到原来的高度，您需要捕获它们的高度，而不是.bottom-menu的高度。此外，您应该使用.height():

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

JS小提琴

或者你可以把它们的高度改为auto:

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

JS小提琴

额外注意:

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

最后，我推荐使用media-queries，而不是使用JS

@dwreck08是对的，我需要使用媒体查询，这是一个技巧:

@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;	
	}
}

相关文章：