- 多语言网站制作怎么做？翻译、布局与SEO要点解析
- 外链一定要这样做
- 红色代码II病毒
- Server Application Unavailable 错误解决办法
- SPU和SKU都是什么意思
- ASP.NET 服务器控件对应HTML标签
- Ecshop静态生成网站解决方案
- 微信小程序中Var、Let、Const用法分析
- SQLserver2000 企业管理器错误 提示 MMC 无法创建管理单元。 怎么解决这个问题（不重装）
- navicat for mysql修改表的数据存储引擎(myisam和innodb)
邮箱：
手机：15383239821
jQuery的滑动效果（slideDown()，slideUp（），slideToggle()）的应用方法
鼠标移入时内容向下滑出，鼠标移开时内容向上滑动隐藏的三种方法
slideDown()：向下滑出直到全部显现；
slideUp（）：向上滑走直到消失；
slideToggle()：向下和向上滑动两个动作切换。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul,
li {
margin: 0;
padding: 0;
color: #7B68EE;
}
li {
list-style: none;
}
.title {
float: left;
width: 100px;
}
.titleTxt {
display: inline-block;
width: 40px;
}
.sub {
display: none;
margin-top: 10px;
width: 120px;
}
</style>
</head>
<body>
<ul>
<li class="title">
<span class="titleTxt">音乐</span>
<ul class="sub">
<li>Perfect</li>
<li>One Day</li>
<li>Love story</li>
</ul>
</li>
<li class="title">
<span class="titleTxt">电影</span>
<ul class="sub">
<li>唐人街探案3</li>
<li>你好，李焕英</li>
<li>刺杀小说家</li>
</ul>
</li>
<li class="title">
<span class="titleTxt">综艺</span>
<ul class="sub">
<li>王牌对王牌</li>
<li>青春环游记</li>
<li>running man</li>
</ul>
</li>
</ul>
<script src="../../jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 鼠标悬浮在标题上子内容展开
$(function() {
// 方法一:
$('.titleTxt').mouseover(function() {
$(this).parent().children('ul').stop().slideDown()
})
$('.titleTxt').mouseout(function() {
$(this).parent().children('ul').stop().slideUp()
})
// 方法二：
// hover是鼠标经过和鼠标移开的复合写法
$('.titleTxt').hover(function() {
//鼠标移入
$(this).parent().children('ul').stop().slideDown()
},function() {
//鼠标移出
$(this).parent().children('ul').stop().slideUp()
})
// 方法三：
$('.titleTxt').hover(function() {
//鼠标移入移出执行的同一个函数，就只用写一个函数
$(this).parent().children('ul').stop().slideToggle()
})
})
</script>
</body>
</html>
注意：每个效果前我都加了stop( )，是为了停止排队，动画或效果一旦触发就会执行，如果多次触发，就会造成效果或队列排队执行
stop（ ）的功能是停止动画或效果，相当于结束上一次动画或效果。
-
2020-08-03如何通过软文投放提高媒体网站的权重值？三个办法让软文投放更有曝光度
-
2020-08-01谁知道电商运营工资大概是怎么算的比较合理？
-
2013-10-30Request、Request.Form和Request.QueryString的区别
-
2025-04-09CSS中的“>”符号作用
-
2011-07-17独立IP主机如何实现屏蔽域名恶意解析问题
