jQuery入门案例:显示或隐藏动画(导航栏)
杨恒昌 2020-11-26 16:39:42
使用工具:关注私聊获取编译软件+源代码

功能演示


jQuery入门案例:显示或隐藏动画(导航栏)

功能演示


代码如下

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* //将内边距,外边距设置为0 .默认都是存在外边距内边距的 */ * { padding: 0px; margin: 0px; list-style: none; margin: auto; } /* //设置一级列表的宽度,背景 */ .lii { background-color: yellow; width: 110px; border-right: 1px solid; border-left: 1px solid; } /* //设置二级列表的框线,宽,背景 */ .ul li { border: 1px solid; width: 110px; background-color: red; } </style> <!-- //加载jquery文件 --> <script type="text/javascript" src="js/jquery-3.4.1.js"> </script> <script type="text/javascript"> //文档就绪函数 $(function() { //一级列表的点击事件 $(".lii").click(function() { //slideToggle是slideUp() 和 slideDown() 之间的切换: //children()子元素,点击区域的子元素上滑消失或下滑出现 $(this).children().stop().slideToggle(500); }) }) </script> </head> <body> <div id="d"> <!-- 无序列表 --> <ul id="li"> <!-- 一级列表001 --> <li class="lii">一级列表001 <!-- 二级列表001 --> <ul class="ul"> <li>二级列表001-1</li> <li>二级列表001-2</li> <li>二级列表001-3</li> <li>二级列表001-4</li> <li>二级列表001-5</li> </ul> </li> <!-- 一级列表002 --> <li class="lii">一级列表002 <!-- 二级列表002 --> <ul class="ul"> <li>二级列表002-1</li> <li>二级列表002-2</li> <li>二级列表002-3</li> <li>二级列表002-4</li> <li>二级列表002-5</li> </ul> </li> <!-- 一级列表003 --> <li class="lii">一级列表003 <!-- 二级列表003 --> <ul class="ul"> <li>二级列表003-1</li> <li>二级列表003-2</li> <li>二级列表003-3</li> <li>二级列表003-4</li> <li>二级列表003-5</li> </ul> </li> </ul> </div> </body></html>

0基础学编程,纯干货,关注【一只联动猫】不迷路

版权声明
本文为[杨恒昌]所创,转载请带上原文链接,感谢
https://www.seoxiehui.cn/article-267641-1.html
相似文章

2021-08-09