使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态
查看本章节
查看作业目录
需求说明：
使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态
实现思路：
- 在页面中添加<ul> 标签，用来显示无序列表。在<ul> 标签下添加两个<li> 标签，用来显示列表内容
- 在<li> 标签下添加两个<div> 标签，第一个显示一级列表的内容，第二个显示二级列表的内容
- 第二个<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 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态的更多相关文章
- 【Android初级】如何实现一个有动画效果的自定义下拉菜单
我们在购物APP里面设置收货地址时,都会有让我们选择省份及城市的下拉菜单项.今天我将使用Android原生的 Spinner 控件来实现一个自定义的下拉菜单功能,并配上一个透明渐变动画效果. 要实现的 ...
- 封装dropdown模块（使用到之前写好的动画组件，封装下拉菜单）
用 showhide 改写dropdown 模块: 1.首先在 css中新增动画相关样式 /*showhide组件的样式*/ .fadeOut{ opacity:; visibility: hidde ...
- jquery插件制作，下拉菜单
要求输入框点击出现下拉菜单,并实现以下功能: 1.首先点击地点标签页,选择好地点: 2.自动显示相应节点标签页显示节点信息,选择好节点 3.自动显示相应的连接点,选择连接点,连接点被选中并被传送的输入 ...
- jQuery 实现无限任意添加下拉菜单
新学jQuery还有很多没学,今天做了个下拉菜单,按照自己的思想结合学的基础效果实现一款可以任意添加层数的下拉菜单,如果有什么建议,欢迎指教啦啦啦 我喜欢备注细一些,这样给自己也是一种理解和方便回顾哈 ...
- jquery下拉菜单
下拉菜单或者导航是我们在网站开发中不可或缺的网站元素之一,使用jQuery可以制作出简洁易用.美观大方的下拉菜单或者导航效果. 下面展示的12款利用jQuery实现的下拉菜单即导航效果整理自前端大牛爱 ...
- AngularJS中实现显示或隐藏动画效果的3种方式
本篇体验在AngularJS中实现在"显示/隐藏"这2种状态切换间添加动画效果. 通过CSS方式实现显示/隐藏动画效果 思路: →npm install angular-anima ...
- jQuery 小特效【文本框折叠隐藏，展开显示】【下拉菜单】【颜色渐变】【弹窗+遮罩】
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs& ...
- jQuery点击页面其他部分隐藏下拉菜单
一.开发小要点 web页面中,我们一般不用select.option来实现下拉菜单效果,因为下拉框的样式丑且难以美化,所以我们选择控制ul显示隐藏来实现同样且高大上的效果,但是不能像下拉框那样点击页面 ...
- -第2章 JS方法实现下拉菜单显示和隐藏
知识点 onmouseover 鼠标经过 onmouseout 鼠标移出 function 关键字 getElementsByTagName 获取一组标签 length 获取对象成员个数 思路 给一级 ...
随机推荐
- windows Notepad++ 上配置 vs 编译器 ， 编译并运行
windows 中 配置 vs编译器 在Linux下,Kris是倾向于在终端中使用gcc和g++来编译C/C++的,在Windows下相信很多人都是选择臃肿的Visual Studio,我亦不免如此. ...
- [项目总结]怎么获取TextView行数，为什么TextView获取行数为0？
1 final TextView textView = new TextView(this); 2 ViewTreeObserver viewTreeObserver = textView.getVi ...
- Linux:$?,$n,$#,$0
$? 获取执行上一个指令的返回值(0为成功,非零为失败) $n 获取当前执行的shell脚本的第n个参数值,n=1...9,当n=0的时表示脚本的文件名,如果n大于9,大括号括起来${10} $# 获 ...
- 加密时java.security.InvalidKeyException: Illegal key size or default parameters解决办法
需 Java几乎各种常用加密算法都能找到对应的实现.因为美国的出口限制,Sun通过权限文件(local_policy.jar.US_export_policy.jar)做了相应限制.因此存在一些问题: ...
- Turbine使用
一.简介 Turbine是聚合服务器发送事件流数据的一个工具,Hystrix的监控中,只能监控单个节点,实际生产中都为集群,因此可以通过Turbine来监控集群下Hystrix的metrics情况 T ...
- LuoguP1898 缘分计算 题解
Content 根据一个长度为 \(l\),只含大写字母的字符串算出它的"缘分值". 步骤如下: 给定一个数 \(st\). 将字符串里面的所有字母改成数字(如 A 改成 \(st ...
- TensorFlow.NET机器学习入门【2】线性回归
回归分析用于分析输入变量和输出变量之间的一种关系,其中线性回归是最简单的一种. 设: Y=wX+b,现已知一组X(输入)和Y(输出)的值,要求出w和b的值. 举个例子:快年底了,销售部门要发年终奖了, ...
- java 多线程：线程池的使用Executors~ExecutorService； newCachedThreadPool；newFixedThreadPool(int threadNum)；ScheduledExecutorService
1,为什么要使用线程池:Executors 系统启动一个新线程的成本是比较高的,因为它涉及与操作系统交互.在这种情形下,使用线程池可以很好地提高性能,尤其是当程序中需要创建大量生存期很短暂的线程时,更 ...
- linux 下查看文件修改时间
linux 下查看文件修改时间 等 http://blog.sina.com.cn/s/blog_6285b04e0100f4xr.html 查看文件时间戳命令:stat awk.txtFile: ` ...
- reducer在react使用
编写store.js 小state reducer 怎么来 纯函数 state+action 生成新的state actions type return{ } state action === s ...