查看本章节

查看作业目录

需求说明：

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

实现思路：

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

实现代码：

核心代码：

  1. <script type="text/javascript">
  2. 	$(function(){
  3. 		$(".t").click(function(){
  4. 			var children = $(this).siblings(".txt")
  5. 			// children.toggle();
  6. 			if(children.is(":hidden")){
  7. 				children.show();
  8. 			}else{
  9. 				children.hide();
  10. 			}
  11. 		})
  12. 	})
  13. </script>

完整代码：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title></title>
  6. 		<style type="text/css">
  7. 			*{
  8. 				margin: 0px;
  9. 				padding: 0px;
  10. 			}
  11. 			body{
  12. 				font-size: 14px;
  13. 			}
  14. 			ul{
  15. 				list-style: none outside;
  16. 			}
  17. 			a{
  18. 				text-decoration: none;
  19. 				color: #696969;
  20. 			}
  21. 			a:hover{
  22. 				text-decoration: none;
  23. 				color: #ff6637;
  24. 			}
  25. 			.left_nav{
  26. 				border: 1px solid #e6e6e6;
  27. 				overflow: hidden;
  28. 				margin: 30px;
  29. 				width: 190px;
  30. 			}
  31. 			.left_nav li{
  32. 				border-top: 1px dashed #e7e7e7;
  33. 			}
  34. 			.left_nav li .t{
  35. 				height: 50px;
  36. 				line-height: 50px;
  37. 				padding: 0 0 0 18px;
  38. 				position: relative;
  39. 			}
  40. 			.left_nav li .txt{
  41. 				padding: 0 0 0 18px;
  42. 				display: none;
  43. 				border-top: 1px dashed #e7e7e7;
  44. 			}
  45. 		</style>
  46. 		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
  47. 		<script type="text/javascript">
  48. 			$(function(){
  49. 				$(".t").click(function(){
  50. 					var children = $(this).siblings(".txt")
  51. 					// children.toggle();
  52. 					if(children.is(":hidden")){
  53. 						children.show();
  54. 					}else{
  55. 						children.hide();
  56. 					}
  57. 				})
  58. 			})
  59. 		</script>
  60. 	</head>
  61. 	<body>
  62. 		<div class="left_nav">
  63. 			<ul>
  64. 				<li>
  65. 					<div class="t"><a href="#">图书畅享榜</a></div>
  66. 					<div class="txt">
  67. 						<p><a href="#">我喜欢生命本来的样子</a></p>
  68. 						<p><a href="#">雪落香杉树</a></p>
  69. 					</div>
  70. 				</li>
  71. 				<li>
  72. 					<div class="t"><a href="#">新书畅享榜</a></div>
  73. 					<div class="txt">
  74. 						<p><a href="#">余生很长，何必慌张</a></p>
  75. 						<p><a href="#">你那么懂事，一定很辛苦吧</a></p>
  76. 					</div>
  77. 				</li>
  78. 			</ul>
  79. 		</div>
  80. 	</body>
  81. </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. ssh : connect to host XXX.XXX.XXX.XXX port : 22 connect refused

    初学者 写博客 如有不对之处请多多指教 我是要在俩个主机的俩个虚拟机上 用scp (security copy)进行文件远程复制. 但是 终端 提示 ssh : connect to host XXX ...

  2. 【vector的输出问题】 洛谷 P1996 约瑟夫问题

    题目:P1996 约瑟夫问题 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 可恶啊,本来是一道不算难的题,硬是因为cin,cout同步流卡了我一天qwq 关闭cin,cout同步流 ...

  3. 【编程思想】【设计模式】【创建模式creational】抽象工厂模式abstract_factory

    Python版 https://github.com/faif/python-patterns/blob/master/creational/abstract_factory.py #!/usr/bi ...

  4. 【Linux】【Services】【Web】Haproxy

    1. 概念 1.1. 官方网站 http://www.haproxy.org/ 2. 安装 yum安装 yum -y install haproxy keepalived 配置haproxy日志,修改 ...

  5. Springboot,SSM及SSH的概念、优点、区别及缺点

    Springboot的概念: 是提供的全新框架,使用来简化Spring的初始搭建和开发过程,使用了特定的方式来进行配置,让开发人员不在需要定义样板化的配置.此框架不需要配置xml,依赖于像MAVEN这 ...

  6. 错误: 找不到或无法加载主类(IDEA中启动spring boot项目)

    版权声明:本文为博主原创文章,如果转载请给出原文链接:http://www.jufanshare.com/content/142.html 提示:需要对IDEA编辑工具使用熟悉 出现一个问题,就是sp ...

  7. IDEA 使用rest client测试

    一.进入 rest 控制台 idea 导航栏 ==> Tools ==> HTTP Client ==> Test RESTFUL Web Service 如图: 一般来说,idea ...

  8. 利用ajax，js以及正则表达式来验证表单递交

    <!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" ...

  9. 使用buffered流结合byte数组，读入文件中的内容，包括中文字符

    package com.itcast.demo05.Buffered;import java.io.BufferedInputStream;import java.io.FileInputStream ...

  10. jQuery选择器整理+知识总结

    jQuery选择器 没有不会遗忘的知识,还是做个总结吧! 一.基本分类 jQuery选择器大致可以分为两类,基本选择器和过滤选择器,总体结构体系如下:   二.基本选择器 基本选择器又可以分为三种,分 ...