查看本章节

查看作业目录

需求说明：

使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态

实现思路：

  1. 在页面中添加<ul> 标签，用来显示无序列表。在<ul> 标签下添加两个<li> 标签，用来显示列表内容
  2. 在<li> 标签下添加两个<div> 标签，第一个显示一级列表的内容，第二个显示二级列表的内容
  3. 第二个<div> 标签默认为隐藏状态，点击列表的项，切换二级列表的显示或隐藏状态

实现代码：

核心代码：

<script type="text/javascript">

	$(function(){

		$(".t").click(function(){

			var children = $(this).siblings(".txt")

			// children.toggle();

			if(children.is(":hidden")){

				children.show();

			}else{

				children.hide();

			}

		})

	})

</script>

完整代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<style type="text/css">

			*{

				margin: 0px;

				padding: 0px;

			}

			body{

				font-size: 14px;

			}

			ul{

				list-style: none outside;

			}

			a{

				text-decoration: none;

				color: #696969;

			}

			a:hover{

				text-decoration: none;

				color: #ff6637;

			}

			.left_nav{

				border: 1px solid #e6e6e6;

				overflow: hidden;

				margin: 30px;

				width: 190px;

			}

			.left_nav li{

				border-top: 1px dashed #e7e7e7;

			}

			.left_nav li .t{

				height: 50px;

				line-height: 50px;

				padding: 0 0 0 18px;

				position: relative;

			}

			.left_nav li .txt{

				padding: 0 0 0 18px;

				display: none;

				border-top: 1px dashed #e7e7e7;

			}

		</style>

		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">

			$(function(){

				$(".t").click(function(){

					var children = $(this).siblings(".txt")

					// children.toggle();

					if(children.is(":hidden")){

						children.show();

					}else{

						children.hide();

					}

				})

			})

		</script>

	</head>

	<body>

		<div class="left_nav">

			<ul>

				<li>

					<div class="t"><a href="#">图书畅享榜</a></div>

					<div class="txt">

						<p><a href="#">我喜欢生命本来的样子</a></p>

						<p><a href="#">雪落香杉树</a></p>

					</div>

				</li>

				<li>

					<div class="t"><a href="#">新书畅享榜</a></div>

					<div class="txt">

						<p><a href="#">余生很长，何必慌张</a></p>

						<p><a href="#">你那么懂事，一定很辛苦吧</a></p>

					</div>

				</li>

			</ul>

		</div>

	</body>

</html>

使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态的更多相关文章

  1. 【Android初级】如何实现一个有动画效果的自定义下拉菜单

    我们在购物APP里面设置收货地址时,都会有让我们选择省份及城市的下拉菜单项.今天我将使用Android原生的 Spinner 控件来实现一个自定义的下拉菜单功能,并配上一个透明渐变动画效果. 要实现的 ...

  2. 封装dropdown模块（使用到之前写好的动画组件，封装下拉菜单）

    用 showhide 改写dropdown 模块: 1.首先在 css中新增动画相关样式 /*showhide组件的样式*/ .fadeOut{ opacity:; visibility: hidde ...

  3. jquery插件制作，下拉菜单

    要求输入框点击出现下拉菜单,并实现以下功能: 1.首先点击地点标签页,选择好地点: 2.自动显示相应节点标签页显示节点信息,选择好节点 3.自动显示相应的连接点,选择连接点,连接点被选中并被传送的输入 ...

  4. jQuery 实现无限任意添加下拉菜单

    新学jQuery还有很多没学,今天做了个下拉菜单,按照自己的思想结合学的基础效果实现一款可以任意添加层数的下拉菜单,如果有什么建议,欢迎指教啦啦啦 我喜欢备注细一些,这样给自己也是一种理解和方便回顾哈 ...

  5. jquery下拉菜单

    下拉菜单或者导航是我们在网站开发中不可或缺的网站元素之一,使用jQuery可以制作出简洁易用.美观大方的下拉菜单或者导航效果. 下面展示的12款利用jQuery实现的下拉菜单即导航效果整理自前端大牛爱 ...

  6. AngularJS中实现显示或隐藏动画效果的3种方式

    本篇体验在AngularJS中实现在"显示/隐藏"这2种状态切换间添加动画效果. 通过CSS方式实现显示/隐藏动画效果 思路: →npm install angular-anima ...

  7. jQuery 小特效【文本框折叠隐藏，展开显示】【下拉菜单】【颜色渐变】【弹窗+遮罩】

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs& ...

  8. jQuery点击页面其他部分隐藏下拉菜单

    一.开发小要点 web页面中,我们一般不用select.option来实现下拉菜单效果,因为下拉框的样式丑且难以美化,所以我们选择控制ul显示隐藏来实现同样且高大上的效果,但是不能像下拉框那样点击页面 ...

  9. -第2章 JS方法实现下拉菜单显示和隐藏

    知识点 onmouseover 鼠标经过 onmouseout 鼠标移出 function 关键字 getElementsByTagName 获取一组标签 length 获取对象成员个数 思路 给一级 ...

随机推荐

  1. 从源码看RequestMappingHandlerMapping的注册与发现

    1.问题的产生 日常开发中,大多数的API层中@Controller注解和@RequestMapping注解都会被使用在其中,但是为什么标注了@Controller和@RequestMapping注解 ...

  2. 转Android service 启动篇之 startForegroundService

    本文转自:https://blog.csdn.net/shift_wwx/article/details/82496447 前言: 在官方文档 Android 8.0 行为变更 中有这样一段话: An ...

  3. d3 CSS

    CSS的inline.block与inline-block 块级元素(block):独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽. 行内元素(inline ...

  4. oracle中分组中的ROLLUP和CUBE选项

    在进行多列分组统计时,如果直接使用GROUP BY子句指定分组列,则只能生成基于所有分组列的统计结果.如果在GROUP BY子句中使用ROLLUP语句或CUBE语句,除了生成基于所有指定列的分组统计外 ...

  5. 远程调用RPC

    一.简介 RPC,就是Remote Procedure Call的简称呀,翻译成中文就是远程过程调用. 本地调用,就好比你现在在家里,你要想洗碗,那你直接把碗放进洗碗机,打开洗碗机开关就可以洗了.这就 ...

  6. Jenkins触发构建

    目录 一.简介 二.时间触发 定时触发 轮询代码仓库 三.事件触发 由上游任务触发 gitlab通知触发 四.通用触发接口 GWT 提取参数 触发某个具体项目 过滤请求值 控制打印内容 控制响应 一. ...

  7. IO中同步异步，阻塞与非阻塞 -- 原理篇

    再补一篇高手写的理论分析,便于更深刻理解 转自:http://blog.csdn.net/historyasamirror/article/details/5778378 ============== ...

  8. IO多路复用技术总结

    来源:微信公众号「编程学习基地」 IO 多路复用概述 I/O 多路复用技术是为了解决进程或线程阻塞到某个 I/O 系统调用而出现的技术,使进程不阻塞于某个特定的 I/O 系统调用. 在IO多路复用技术 ...

  9. 人工水母搜索算法—matlab代码

    clc clear foj = @ Sphere; Lb = -100; % 搜索空间下界 Ub = 100; % 搜索空间上界 N_iter = 1000; % 最大迭代次数 n_pop = 50; ...

  10. 测试开发实战[提测平台]17-Flask&Vue文件上传实现

    微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 先回顾下在此系列第8次分享给出的预期实现的产品原型和需求说明,如下图整体上和前两节实现很相似,只不过一般测试报告要写的内容可能比较多,就多 ...