查看本章节

查看作业目录

需求说明：

使用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. git 的基本流程

    有个本地文件 打开 新建一个 打开git $ git push origin master 这里是上传文件.  (你每次上传的时候,都要先提交到本地的仓库...然后再上传) github上就有了 如何 ...

  2. Ribbon详解

    转自Ribbon详解 简介 ​ Spring Cloud Ribbon是一个基于HTTP和TCP的客户端负载均衡工具,它基于Netflix Ribbon实现.通过Spring Cloud的封装,可以让 ...

  3. excel数据导入mySql数据库

    1.将excel数据保存好 2.打开数据库,在表上点击右键,选择导入向导 3.点击下图中红色部门,点击下一步 4.选择excel文件的位置,下方的表空间内,会出现excel中的sheet页,选择要导入 ...

  4. Django REST framework完全入门

    Django REST framework 一个强大灵活的Django工具包,提供了便捷的 REST API 开发框架 我们用传统的django也可以实现REST风格的api,但是顶不住Django ...

  5. Linux目录结构和基础命令

    Linux目录和基础命令 目录 Linux目录和基础命令 1 Linux目录结构 1.1 Linux文件名命令要求 1.2 文件的类型 2. 基础命令 2.1 ls 2.2 cd和pwd 2.3 命令 ...

  6. 前端避坑指南丨辛辛苦苦开发的 APP 竟然被判定为简单网页打包？

    传统混合移动App开发模式,通常会使用WebView作为桥接层,但随着iOS和Android应用商店审核政策日趋严格,有时会被错误判定为简单网页打包成App,上架容易遭到拒绝. 既然可能存在风险,那我 ...

  7. ES6解构赋值的简单使用

    相较于常规的赋值方式,解构赋值最主要的是'解构'两个字,在赋值的过程中要清晰的知道等号右边的结构. 先简单地看一下原来的赋值方式. var a=[1,2] 分析一下这句代码的几个点: (1)变量申明和 ...

  8. 控制 Python 类的序列化过程

    问题 有的类是不支持在多进程间传递的,如果非要这么做,可能会引发奇怪的现象.比如下面这段代码: from concurrent.futures import ProcessPoolExecutor, ...

  9. [BUUCTF]PWN1——test_your_nc

    [BUUCTF]PWN1-test_your_nc 题目网址:https://buuoj.cn/challenges#test_your_nc 步骤: 根据题目提示,nc一下靶场 2.nc连接上后ls ...

  10. 【Azure Redis 缓存】Azure Cache for Redis 中如何快速查看慢指令情况(Slowlogs)

    问题描述 当 Azure Redis 服务器负载过高的情况下,使用时就会遇见连接超时,命令超时,IO Socket超时等异常.为了能定位是那些因素引起的,可以参考微软官方文档( 管理 Azure Ca ...