Web 前端实战：JQ 实现下拉菜单

实现过程

实现一个简易的鼠标悬停菜单项显示其子项的下拉框控件。将用到 CSS 绝对定位、流式布局、动画等；JQuery 鼠标移入和移出事件、DOM 查找。效果图如下：

HTML 结构：

<div class="dropdown-group">
	<div class="dropdown">
		<div class="label">菜单1</div>
		<div class="items">
			<div class="item">菜单1-1</div>
		</div>
	</div>
</div>

使用流式布局让div.dropdown-group下的所有div.dropdown横向排列：

.dropdown-group {
	cursor: pointer;
	height: 40px;
	width: 220px;
	display: flex;
	justify-content: space-between;
	align-content: center;
	align-items: center;
	background-color: #7979DE;
}

div.dropdown 的高和宽都要和父元素保持一致，并且定位是相对定位，因为其子项都是相对于它进行的，绝对定位和相对定位：

.dropdown {
	height: 100%;
	width: 100%;
	position: relative;
}

div.dropdown div.items也就是下拉所展示的元素，相对于其父元素进行定位，自身是绝对定位，top的值和父元素的高度一致，即 40px，left的值设置 0px，左上角对齐父元素的左下角。display在鼠标没有悬停时设置为 none。

当鼠标悬停菜单时，div.dropdown div.items的display设置为 block。动画有 0.5s 的延迟，从 0 高度到最大高度过程中，元素溢出时必须要隐藏，即overflow-y: hidden。

.dropdown .items {
	display: none;
	width: 100%;
	padding: 5px;
	position: absolute;
	top: 40px;
	left: 0;
	overflow-y: hidden;
	box-sizing: border-box;
	background-color: #00B7FF;
}

.dropdown:hover .items {
	display: block;
}

最后，轮到 JQ 部分，当鼠标悬停时，查询每一个子项的总高度，以及添加样式和移除样式：

$(".dropdown")
	.mouseenter(function () {
		let $items = $(this).find("div.items");
		$(this).css({ "--items-height": `${ $items.height() }px` });
		$items.addClass("show-items");
	})
	.mouseleave(function () {
		let $items = $(this).find("div.items");
		$items.removeClass("show-items");
	});

.show-items {
	animation: ShowItems 0.5s ease-in-out;
}

@keyframes ShowItems {
	0% {
		height: 0;
	}
	100% {
		height: var(--items-height)
	}
}

Gitee 仓库

https://gitee.com/shiramashiro/web-learning/tree/main/src/03.案例