开发者社区> 明金同学> 正文

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

2022-05-12 249

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

需求说明：


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


69.png

实现思路：


  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>

版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

JavaScript
jQuery点击 jQuery页面 jQuery下拉菜单 jQuery列表 jQuery动画效果
开发者社区 > 开发与运维 > 文章
云迁移中心
作者高分内容
更多
bat文件调用cmd命令批量提取文件夹中的文件名（批量修改文件扩展名） 623 Failed to connect to 127.0.0.1 port 1080: Connection refused package 问题解决方法 368 分享一个好看的个人主页源码 729 Typora上传图片后提示 “image load failed“ 无法加载出图片 1729 MySQL百分比显示和显示前百分之几的方法 284
相关文章
授客
JQuery javascript实现父子页面相互调用
JQuery javascript实现父子页面相互调用
17 0
4yva5hg3m356w
jquery 处理页面的事件详解
jquery事件、修改页面内容
44 0
小5聊基础
【前端】使用jQuery实现一个简单的在线页面或API接口请求功能
对于测试人员来说，借助一些测试工具非常的重要，像postman等工具，很方便就能发起api接口的请求和测试 但是，对于开发人员来说，有时候未必一开始就使用这些工具，有可能电脑原因未安装到这些工具或者太麻烦 基于这样一个情况，本篇文章就来简单实现下在线页面发起http的get或post请求的功能 作者：全栈小5 链接：https://juejin.cn/post/7107132057263800327 来源：稀土掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
145 0
黄啊码
js或jquery实现页面打印可局部打印
js或jquery实现页面打印可局部打印
135 0
解圃
【jquery Ajax 】art-template模板引擎案例——新闻列表
【jquery Ajax 】art-template模板引擎案例——新闻列表
58 0
chenchuan
jquery判断页面滚动条(scroll)是上滚还是下滚，且是否滚动到头部或者底部
webtouch（webapp）页面，防苹果手机safari浏览器，往上滑动，底部导航消失，滑动到底部又出现。向下滑动，底部导航出现。
186 0
六月的雨在钉钉
jquery scroll 滚动加载列表 获取腾讯云图片像素信息
整体列表通过拉取腾讯云COS文件桶信息，同时图片需要展示像素信息
396 0
天隆金
jQuery图片列表拖拽排序布局
在线演示 本地下载
738 0
php的小菜鸟
jquery列表点击加载更多
原生点击按钮加载更多(懒加载，每次加载N个) *{margin: 0;padding:0;list-style: none;} body{background: #333;font-size:...
19130 0
技术小哥哥
jQuery两个列表中元素相互交换Demo
931 0
+关注
明金同学
00后创作者，IT从业者，CSDN博客专家。
文章
问答
视频
作者高分内容
更多
bat文件调用cmd命令批量提取文件夹中的文件名（批量修改文件扩展名） 623 Failed to connect to 127.0.0.1 port 1080: Connection refused package 问题解决方法 368 分享一个好看的个人主页源码 729 Typora上传图片后提示 “image load failed“ 无法加载出图片 1729 MySQL百分比显示和显示前百分之几的方法 284
文章排行榜
最热
最新
1 代码的简单设计五原则 32153
2 java 泛型 万字详解（通俗易懂) 29111
3 阿里云检索分析服务Elasticsearch版内核持续优化 26090
4 【分布式技术专题】「分布式技术架构」手把手教你如何开发一个属于自己的限流器RateLimiter功能服务 22533
5 Hive SQL on Flink 构建流批一体引擎 16886
6 PolarDB-X 致数据库行内人 (一) ~ 如何有效评测国产数据库的分布式事务 16173
7 实践教程之体验PolarDB-X分布式事务和数据分区 11207
8 现场直击：2023阿里云峰会精彩发布抢先看（内含福利） 336934
9 Python3，自从掌握了这个方法，再也不用print进行调试了。 15758
10 实践教程之如何在ARM平台部署PolarDB-X 10222
11 如何解决IoT数据入仓的客户实践 9445
12 如何在5分钟之内完成一个物联网统计指标？ 8029
13 大数据&AI产品月刊【2023年4月】 6208
14 ClickHouse创始人：融合数据库该“卷”的还是性能和速度 56235
15 除了价格降70%，关于对象存储预留空间你还需要了解这些 33189
16 阿里云联合埃森哲正式发布《跨国企业上云登陆区（Landing Zone）白皮书》 51580
17 深入探究HDFS：高可靠、高可扩展、高吞吐量的分布式文件系统【上进小菜猪大数据系列】 4813
18 编程中最难的就是命名？这几招教你快速上手 33100
19 .NET MAUI 开发电子木鱼（下） 3849
20 RocketMQ 多级存储设计与实现 21686
1 面向未来的开源 OLAP 技术架构探讨以及选型实践 65
2 宜搭版本调整通知 197
3 Ganos矢量快显功能上手 60
4 不一样的ECS U实例 709
5 Windows server——部署DNS服务 10609
6 Windows server——部署DHCP服务 61
7 NineData，稳定、高效的Redis数据同步解决方案 599
8 【Python基础篇021】黏包现象丨udp的socket服务 10252
9 聊一聊Spark序列化是干什么的？ 10476
10 图解LeetCode——230. 二叉搜索树中第K小的元素 80
11 图解LeetCode——199. 二叉树的右视图 68
12 如何建立Linux与git的连接？ 10556
13 Redis 从入门到精通之Redis配置说明 10735
14 30分钟，一键拉起基于LLM + AnalyticDB PostgreSQL构建的企业专属Chatbot 6597
15 图解LeetCode——114. 二叉树展开为链表 10536
16 CloudOps自动化运维套件助力企业更好上云、用云、管云 5854
17 如何在 TypeScript 中将字符串转换为日期对象？ 10354
18 数据库内核那些事｜细说PolarDB优化器查询变换 - join消除篇 10558
19 阿里云 Serverless 容器服务全面升级：新增组件全托管、AI 镜像秒级拉取能力 5902
20 驱动开发：内核实现SSDT挂钩与摘钩 10560
相关课程
更多
jQuery开发教程
16089
43
去学习
推荐文章
现场直击：2023阿里云峰会精彩发布抢先看 AIGC主题征文开启，参与赢取富士拍立得 乘风伯乐招募令，邀请伯乐获取多重好礼！ 乘风者计划邀您入驻社区，精彩权益即刻享
相关电子书
更多
低代码开发师（初级）实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期：MySQL数据库进阶实战
立即下载
相关实验场景
更多
基于参数关联关系动态呈现参数
19
1.0小时
去实验