jQuery学习：显示隐藏一级菜单


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script src="../js/jquery-3.6.1.js">script>
		<style>
			#app_id {
				width: 100px;
				background-color: aqua;
				height: 35px;
				text-align: center;
				line-height: 35px;
			}
 
			.stylediv {
				background-color: yellow;
				border-top: 1px solid #000;
			}
		style>
	head>
	<body>
		<ul>
			<li id="app_id" class="app_jd" name="show_hide">
				abc
				<div id="app_id_items" style="display: none;">
					<div>dldldiv>
					<div>ddddiv>
					<div>dldldiv>
					<div>ddddiv>
					<div>dldldiv>
					<div>ddddiv>
				div>
			li>
		ul>
 
		<script>
			showhide();
 
			function showhide() {
				//鼠标移入显示，移出隐藏
				$('[name=show_hide]').hover(function() { //鼠标移入 显示 this是DOM对象
					var id = this.id + "_items";
					$("#" + id).children().addClass('stylediv')
					$("#" + id).stop().slideDown(1000)
 
				}, function() { //鼠标移出 隐藏
					var id = this.id + "_items";
					$("#" + id).children().addClass('stylediv')
					$("#" + id).stop().slideUp(1000)
				})
			}
		script>
	body>
html>

点击菜单进行动画显示

相关阅读:
Vue3.0+小技巧
2000-2022年上市公司CEO 高管及董事会环保背景数据（5W+ ）（原始数据+处理代码Stata do文档）
【免费模板】2023数学建模国赛word+latex模板免费分享
JWT(1): JWT介绍
HyBird App(混合应用)核心原理JSBridge
【小程序入门】App函数注册小程序实例
手把手教会你微前端开发（vue-qiankun）
【数据结构与算法】拓扑排序与关键路径
外婆手术
高并发高可用高性能的解决方案

原文地址：https://blog.csdn.net/weixin_47295886/article/details/127883079

jQuery学习：显示隐藏 一级菜单

jQuery学习：显示隐藏一级菜单