1.显示效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>特殊效果</title>
<script type="text/javascript" src="../jQuery库/jquery-3.3.1.min.js"></script>
<script type="text/javascript">

$(function(){ $('#btn').click(function(){ /*fadeOut(时间，函数)*/ /*$('.div1').fadeOut(1000);*/ /*fadeToggle淡出淡入*/ /*$('.div1').fadeToggle(1000);*/ /*toggle()切换元素可视状态*/ /*$('.div1').toggle(1000);*/ /*hide()隐藏*/ /*$('.div1').hide(1000);*/ /*show()显示元素*/ /*$('.div1').show(1000);*/ /*slideDown()向下展开*/ /*$('.div1').slideDown(1000);*/ /*slideUp()向上卷起*/ /*$('.div1').slideUp(1000);*/ /*slideToggle()向下向上反复*/ $('.div1').slideToggle(1000); })})</script>

<style type="text/css">

.div1{ width: 300px; height: 300px; background-color: antiquewhite;}</style>

</head>

<body>

<input type="button" value="效果" id="btn"><div class="div1"></div>

</body>
</html>

2.链式调用

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>层级菜单</title>
<script type="text/javascript" src="../jQuery库/jquery-3.3.1.min.js"></script>
<script type="text/javascript">

$(function(){ $('.level1').click(function(){ /*点击a,next()就是ul,stop()修正反复点击，向上向下伸展，父级li,siblings()其他同级li，ul子元素，升起*/ $(this).next().stop().slideToggle().parent().siblings().children('ul').slideUp(); })})</script>

<style type="text/css">

.menu{ width: 100px; background-color: aqua; list-style: none; padding: 0; margin: 50px auto 0;}.menu li{ border-bottom: 1px solid #fff;}.menu li a{ text-decoration: none; color: #8820AF;}.menu li ul{ background-color: #DDD4D5; list-style: none; padding: 0; text-align: center;}.menu li ul li:hover{ background-color: antiquewhite;}</style>

</head>

<body>

<ul class="menu"> <li> <a href="#" class="level1">勇士</a> <ul class="first"> <li><a href="">杜兰特</a></li> <li><a href="">库里</a></li> <li><a href="">汤普森</a></li> </ul> </li> <li> <a href="#" class="level1">火箭</a> <ul> <li><a href="">哈登</a></li> <li><a href="">保罗</a></li> <li><a href="">饼皇</a></li> </ul> </li> <li> <a href="#" class="level1">湖人</a> <ul> <li><a href="">詹姆斯</a></li> <li><a href="">球哥</a></li> <li><a href="">莺歌</a></li> </ul> </li></ul>

</body>
</html>