查看本章节

查看作业目录

需求说明：

使用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. shell神器curl命令的用法 curl用法实例笔记

    shell神器curl命令的用法举例,如下: ##基本用法(配合sed/awk/grep) $curl http://www.jquerycn.cn ##下载保存 $curl http://www.j ...

  2. Function Overloading in C++

    In C++, following function declarations cannot be overloaded. (1)Function declarations that differ o ...

  3. OSGI 生命周期

    1 生命周期管理 对于非模块化应用,生命周期将应用作为一个整体来操作: 而对于模块化应用,则可以以细粒度的方式来管理应用的某一个独立部分. OSGi生命周期管理 OSGi生命周期层有两种不同的作用: ...

  4. HUD总结

    HUD 指示器/HUD/遮盖/蒙板 半透明的指示器如何实现 指示器的alpha = 1.0; 指示器的背景色是半透明的 1. 创建颜色 直接创建对应的颜色 + (UIColor *)blackColo ...

  5. BigDecimal 计算注意事项

    BigDecimal 在进行除法运算(divide)时一定要注意:如果被除数为变量,一定要指定精度 和 舍入模式,否则会报:Non-terminating decimal expansion; no ...

  6. CDN服务的含义

    CDN的全称是Content Delivery Network,即内容分发网络.CDN的基本原理是广泛采用各种缓存服务器,将这些缓存服务器分布到用户访问相对集中的地区或网络中,在用户访问网站时,利用全 ...

  7. 如何在eclipse jee中检出项目并转换为Maven project

    如何在eclipse jee中检出项目并转换为Maven project,最后转换为Dynamic web project 注意:该文档只针对以下eclipse版本,如图 为了方便,我将我本地的压缩包 ...

  8. [BUUCTF]PWN——[V&N2020 公开赛]simpleHeap

    [V&N2020 公开赛]simpleHeap 附件 步骤: 例行检查,64位,保护全开 根据题目可知是一道堆,直接用64位ida打开 我修改了这些函数的名称,这样方便看程序 add,我们可以 ...

  9. Python语言的2个典型特性

    [动态编程语言] 学习过C.C++的同学都知道,使用这二者编写代码时,变量在使用前必须通过类似"int a=123"的语句提取申明,然后在真正赋值的时候校验取值跟类型是否相符.也就 ...

  10. CF336A Vasily the Bear and Triangle 题解

    Content 一个矩形的顶点为 \((0,0)\),其对顶点为 \((x,y)\),现过 \((x,y)\) 作直线,分别交 \(x\) 轴和 \(y\) 轴于 \(A,B\) 两点,使得 \(\t ...