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

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

简介: 使用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>

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

相关文章
JQuery javascript实现父子页面相互调用
JQuery javascript实现父子页面相互调用
17 0
jquery 处理页面的事件详解
jquery事件、修改页面内容
44 0
【前端】使用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
jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部
webtouch(webapp)页面,防苹果手机safari浏览器,往上滑动,底部导航消失,滑动到底部又出现。向下滑动,底部导航出现。
186 0
jquery scroll 滚动加载列表 获取腾讯云图片像素信息
整体列表通过拉取腾讯云COS文件桶信息,同时图片需要展示像素信息
396 0
jQuery图片列表拖拽排序布局
在线演示 本地下载
738 0
jquery列表点击加载更多
原生点击按钮加载更多(懒加载,每次加载N个) *{margin: 0;padding:0;list-style: none;} body{background: #333;font-size:...
19130 0
+关注
明金同学
00后创作者,IT从业者,CSDN博客专家。
文章
问答
视频
文章排行榜
最热
最新
相关课程
更多
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载