查看本章节

查看作业目录

需求说明：

使用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. Linux基础命令---ntpdate网络时间服务器

    ntpdate ntpdate指令通过轮询指定为服务器参数的网络时间协议(NTP)服务器来设置本地日期和时间,从而确定正确的时间. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS ...

  2. Output of C++ Program | Set 17

    Predict the output of following C++ programs. Question 1 1 #include <iostream> 2 using namespa ...

  3. Linux基础命令---mget获取ftp文件

    mget 使用lftp登录mftp服务器之后,可以使用mget指令从服务器获取文件.mget指令可以使用通配符,而get指令则不可以.   1.语法       mget [-E]  [-a]  [- ...

  4. 【编程思想】【设计模式】【行为模式Behavioral】迭代器模式iterator

    Python版 https://github.com/faif/python-patterns/blob/master/behavioral/iterator.py #!/usr/bin/env py ...

  5. MyBatis绑定Mapper接口参数到Mapper映射文件sql语句参数

    一.设置paramterType 1.类型为基本类型 a.代码示例 映射文件: <select id="findShopCartInfoById" parameterType ...

  6. 【JavaWeb】【学习】【过滤器】Filter 的简单应用

    实现效果 在编辑框中输入暗号:如果暗号正确,则跳转到正确页面:如果暗号错误,则跳转到错误界面. [入口界面] [错误界面] [成功界面] [项目结构] JSP文件 本练习有两个jsp页面 页面1:in ...

  7. 快速上手ANTLR

    回顾前文: ANTLR 简单介绍 ANTLR 相关术语 ANTLR 环境准备 下面通过两个实例来快速上手ANTLR. 使用Listener转换数组 完整源码见:https://github.com/b ...

  8. BDD自动化测试框架cucumber(1): 最基本的demo

    BDD(Behavior Driven Development),行为驱动开发, 对应自动化测试框架,python有behave,java有cucumber, 这次记录cucumber+springb ...

  9. ICCV2021 | 简单有效的长尾视觉识别新方案：蒸馏自监督(SSD)

    ​  前言  本文提出了一种概念上简单但特别有效的长尾视觉识别的多阶段训练方案,称为蒸馏自监督(Self Supervision to Distillation, SSD).在三个长尾识别基准:Ima ...

  10. int i=i++;和i=++i;和i++

    1.int i=i++; 2.i=++i; 3.i++