一位Jq小白的发现之菜单项的显示隐藏的多种有趣做法

奋斗的菜鸟.com

已于 2022-07-08 11:17:52 修改

阅读量271

点赞数 2

分类专栏：常见的前端特效文章标签： jquery

于 2020-02-19 21:15:14 首次发布

本文链接：https://blog.csdn.net/CodePrincess/article/details/104400105

版权

常见的前端特效专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在学习中，我发现了鼠标移入，移出时菜单项的显示和隐藏有多种做法，使我对今后的学习更加有兴趣了。

要实现的是点击class为item的元素是只显示该元素下的 ul元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#nav{
				width: 400px;
				height: 50px;
				margin: 0 auto;
				
				margin-top: 200px;
				
			}
			ul{
				list-style: none;
			}
			ul li{ background: orange; 
			color: white;
				float: left;
				width: 100px;
				height: 50px;
				text-align: center;
				line-height: 50px;
				
			}
			.item ul{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="nav">
			<ul>
				<li class="item">首页
				<ul>
					<li>Home</li>
					<li>Home</li>
				</ul>
				</li>
				<li class="item">新闻
				<ul>
					<li>News</li>
					<li>News</li>
				</ul>
				</li>
				<li class="item">列表
				<ul>
					<li>List</li>
					<li>List</li>
				</ul>
				</li>
				<li class="item">联系
				<ul>
					<li>Tel</li>
					<li>Tel</li>
				</ul>
				</li>
			</ul>
		</div>
	</body>
	<script src="../../1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	$(function(){
			$(".item").mouseover(function(){
	//以下几种做法都是我在易驰教育老师那学来的
           // $(this).find("ul").slideDown(500);
			//这是通过高度变化（向下增大）来动态地显示所有匹配的元素（可显示元素的方法）
			$(this).find("ul").fadeIn(500);
			//通过增大不透明度实现淡入(也是一种显示)
           }).mouseout(function(){
			   // $(this).find("ul").slideUp(1500);
			   //通过高度变化（向上减小）来动态地隐藏所有匹配的元素（可隐藏元素的方法）
			   $(this).find("ul").fadeOut(500);
			  // 通过减小不透明度，实现淡出（也是一种隐藏）
		   })
			
		})
    </script>
</html>

利用点击事件（自己一开始想到的，一步搞定），点击时显示该li标签下的子菜单，点击其他li标签则把其他的li下的ul隐藏，只显示它自己的，依次类推。

$(function(){
	$("#nav>ul>li").click(){
	$(this).children().show().parent().siblings().find("ul").hide();
)

教程上看到的有：

做法一 show,hide 比我自己想的多了点动画效果

1，可以用show(),里面写speed来实现动画效果show(5000)，hide()隐藏

$(function(){
	$(".item").mouseover(function(){ 
		$(this).find("ul").show(500);
	}
 })

做法二 slideDown,slideUp

slideDown（）：就是把以上代码show()改为slideDown（）,通过高度的向下增大显示元素,slideUp()，向上隐藏

做法三 fadeIn,fadeOut

3，fadeIn():：就是把以上代码show()改为fadeIn（）,通过增大不透明度来显示元素，fadeOut() 减小不透明度隐藏元素

在这里插入图片描述

奋斗的菜鸟.com

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一位Jq小白的发现之菜单项的显示隐藏的多种有趣做法

在学习中，我发现了鼠标移入，移出时菜单项的显示隐藏有趣的多种做法，使我对今后的学习更加有兴趣了。这是做法一，是点击事件（自己一开始想到的，一步搞定开心ing），点击时显示该li标签下的子菜单，点击其他li标签则把其他的li下的ul隐藏，只显示它自己的，依次类推。$(function(){$("#nav>ul>li").click(){$(this).c......
复制链接

扫一扫

专栏目录