jQuery：实现折叠菜单二级联动动画

知识点

end()回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。
transform：rotate旋转
find()：搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>02-jQuery展开&收起动画案例-折叠菜单-界面搭建</title><style>* {padding: 0;margin: 0;list-style: none;}.nav {width: 300px;margin: 100px auto;border: 1px solid orange;}.top {width: 300px;height: 30px;line-height: 30px;box-sizing: border-box;background: orange;border-bottom: 1px solid white;}.top .arrow {background: url("images/arrow_right.png") no-repeat;float: right;width: 16px;height: 16px;margin-top: 7px;}.list {width: 100px;display: none;}</style>
</head>
<body><ul class="nav"><li><div class="top"><span class="arrow"></span><span>一级菜单</span></div><div class="list"><ul><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></div></li><li><div class="top"><span class="arrow"></span><span>一级菜单</span></div><div class="list"><ul><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></div></li><li><div class="top"><span class="arrow"></span><span>一级菜单</span></div><div class="list"><ul><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></div></li><li><div class="top"><span class="arrow"></span><span>一级菜单</span></div><div class="list"><ul><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></div></li>
</ul><script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript">$(function () {// 1. 点击li$('.nav>li').click(function () {$(this).children('.list').slideDown().end().siblings().children('.list').slideUp();// 2. 箭头旋转$('.top>.arrow').css({'transform': 'rotate(0deg)'});$(this).find('.arrow').css({'transform': 'rotate(90deg)'});});});
</script>
</body>
</html>

运行效果

jQuery：实现折叠菜单二级联动动画相关推荐

css3+jQuery制作导航菜单（带动画效果）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css ...
jQuery实现下拉列表的二级联动
需求:选择省份时右侧自动变为相应省份下的城市列表 <!DOCTYPE h1 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" & ...
Html+Css+jQuery左侧导航菜单三级联动
Html部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
jquery手风琴折叠菜单
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
基于thinkphp5的简单的下拉菜单二级联动
话不多说,上代码模板: <select name="course_class" class="level1"><option value=& ...
dw二级联动下拉菜单插件宋君墨_Excel下拉菜单不会做？15秒教会你制作一二三级联动下拉菜单，从此做表不求人！...
Hi,各位叨友们好呀!我是叨叨君~ 我们都知道,在使用Excel表格统计数据的时候,为了方便录入,通常会在Excel中设置下拉菜单,以便我们输入相同的内容. 那么,Excel中一级.二级.三级联动下拉 ...
【jQuery笔记Part2】02-jQuery展开收起动画帷幔效果案例下拉菜单案例显示隐藏更多案例折叠菜单案例
展开&收起动画&案例 HTML DOM overflow 属性展开 slideDown(毫秒, 完成回调函数) 收起 slideUp(毫秒, 完成回调函数) 切换 slideTogg ...
二级联动菜单ajax刷新,jquery json ajax 二级联动菜单实例
本文实例讲述了jquery json ajax 二级联动菜单.分享给码农们参考,具体如下: 后台Handler.ashx using System; using System.Web; using S ...
HTML实现二级联动下拉菜单,基于jquery的二级联动菜单实现代码
jQuery 1.3.2 简单实现select二级联动 jQuery 二级联动 $(document).ready(function(){ $("#province").chang ...
jquery二级联动下拉菜单
二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果大类: 前端技术 ...

jQuery：实现折叠菜单二级联动动画

知识点

代码

运行效果

jQuery：实现折叠菜单二级联动动画相关推荐

最新文章

热门文章