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>

点击菜单进行动画显示

相关阅读:
FigDraw 13. SCI 文章绘图之桑葚图及文章复现（Sankey）
CF1000F One Occurrence
tcpreplay命令后加上“--maxsleep=num“，num表示最大延迟时间（单位毫秒）
java基础3
element plus表格合并行
分类预测 | MATLAB实现SSA-CNN-BiGRU-Attention数据分类预测（SE注意力机制）
【Python】sqlmodel: Python 数据库管理ORM 的终极形态？
小游戏外包开发流程及费用
C语言实现快速排序算法
潘多拉 IOT 开发板学习（RT-Thread）—— 实验1 LED 闪烁实验（学习笔记）

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

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

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