使用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 获取对象成员个数 思路 给一级 ...
随机推荐
- 集合类——Map集合、Properties属性文件操作
1.Map集合 Collection集合的特点是每次进行单个对象的保存,若要对一对对象来进行保存就只能用Map集合来保存.即Map集合中一次可以保存两个对象,且这两个对象的关系是key = value ...
- spring mvc访问html页面404报错解决
<servlet> <servlet-name>context</servlet-name> <servlet-class>org.springfram ...
- 使用plantuml，业务交接就是这么简单
使用plantuml,业务交接就是这么简单 你好,我是轩脉刃. 最近交接了一个业务,原本还是有挺复杂的业务逻辑的,但发现交接过来的项目大有文章,在项目代码中有一个docs文件夹,里面躺着若干个 pum ...
- Mysql配置文件 扩展详细配置
目录 配置文件中有些特定参数 扩展配置 max_connections connect_timeout interactive_timeout|wait_timeout net_retry_count ...
- 基于TSN 802.1AS协议的时间同步分析（7种延时，1次厘清）
前言 往期的时间同步--802.1AS协议介绍一文向大家介绍了802.1AS协议的基本内容,基于时间同步协议就能实现主节点与各从节点的时间同步,但是如何评价时间同步的优劣呢?这就需要我们通过一些时间同 ...
- png crc讲解
我太难了. 我真的是为你们着想,你们学姐说misc太简单了,可就是这么简单我相信你们也不会做...我还得给你们讲解... 加油吧!!! 工具:010editor 这个我想给你放下载链接来着,后来 ...
- 小迪安全 Web安全 基础入门 - 第二天 - Web应用&架构搭建&漏洞&HTTP数据包&代理服务器
一.网站搭建 1.域名.是由一串用点分隔的字符组成的互联网上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位.域名可以说是一个IP地址的代称,目的是为了便于记忆后者. 2.子域名.在 ...
- CF999A Mishka and Contest 题解
Content 能力值为 \(k\) 的小 M 参加一次考试,考试一共有 \(n\) 道题目,每道题目的难度为 \(a_i\).小 M 会选择两头中的一道难度不超过他的能力值题目去做,每做完一道,这道 ...
- CF1036D Vasya and Arrays 题解
Content 给定两个长度分别为 \(n\) 和 \(m\) 的数列 \(A,B\).你需要将两个数列都恰好分成 \(k\) 份,使得两个数列中第 \(i(i\in[1,k])\) 份的元素和对应相 ...
- [C# Expression] 之基础概念
00 | 什么是表达式树 表达式树以树形数据结构表示代码,其中每一个节点都是一种表达式,比如方法调用和 x < y 这样的二元运算等.可以对表达式树中的代码进行编辑和运算. 这样能够动态修改可执 ...