查看本章节

查看作业目录

需求说明：

使用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. Oracle trunc和round的区别

    1.关于trunc 和round函数比较 整体概括: round函数 四舍五入trunc函数 直接截取 对于时间: Round函数对日期进行"四舍五入",Trunc函数对日期进行截 ...

  2. spring jdbc 配置数据源连接数据库

    概述 在XML配置数据源,并将数据源注册到JDBC模板 JDBC模板关联业务增删改查 在XML配置数据源 <?xml version="1.0" encoding=" ...

  3. mybatis分页插件PageHelper源码浅析

    PageHelper 是Mybaties中的一个分页插件.其maven坐标 <!-- https://mvnrepository.com/artifact/com.github.pagehelp ...

  4. 【C/C++】散列/算法笔记4.2

    先说一下我自己的理解. 我先给你N组数据,这个N组里可能有重复的! 然后我们先统计好了N组里面的独立的每个对应的出现了几次(相当于map,然后每项属性有出现了多少次的),用的是数组下标对应 现在我们给 ...

  5. Linux Ubuntu18.04 安装配置 clash

    我最近一段时间在搭建用于构建 Docker 镜像的开发测试环境,这个环境是一台运行于 Windows 笔记本上的虚拟机,其操作系统为 Ubuntu 18.04 .构建场景中经常要去 Github 获取 ...

  6. Decorator 模式转载

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://tianli.blog.51cto.com/190322/35287 摘要:本文深 ...

  7. de1ctf_2019_weapon（爆破_IO_2_1_stdout)

    (这是我真正意义上的完完全全自己做的第一道堆题目,虽然花了快三个小时,谨以此篇纪念一下) 题目的例行检查我就不放了,将程序放入ida中 程序的逻辑十分简单,漏洞也非常明显 重点是这个程序没有给我们sh ...

  8. CF955C Sad powers 题解

    Content 给你 \(q\) 个询问,每次询问 \([l,r]\) 这个区间内满足 \(x=a^p(a>0,p>1)\) 的 \(x\) 的数量. 数据范围:\(1\leqslant ...

  9. java 多线程 Thread.join子线程结束父线程再运行；join(long)：等待超时毫秒数

    Join的使用 目的:当子线程运行结束后,父线程才能再继续运行 /** * @ClassName ThreadJoinExample * @projectName: object1 * @author ...

  10. java 数据类型：集合接口Collection之List~ArrayList：remove移除；replaceAll改变原有值；sort排序；迭代器listIterator()；

    什么是List集合: 特点: 元素有序可重复的集合. 集合中每个元素都有其对应的顺序索引. List集合默认按元素的添加顺序设置元素的索引,索引从0开始.   List接口的常用方法: List可以使 ...