开发者社区> 萧逸雨> 正文

jq垂直下拉菜单

2016-05-03 1576

简介： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jq测试</title> </head> <body> <div id="nav1"> <div class="dcls"&gt
+关注继续查看
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jq测试</title>
</head>
<body>
	<div id="nav1">
		<div class="dcls">
			<h3 class="hcls">aa000001</h3>
				<ul class="ucls">
					<li>第一个01</li>
					<li>第一个01</li>
					<li>第一个01</li>
				</ul>

			<h3 class="hcls">aa000002</h3>
				<ul class="ucls">
					<li>第一个02</li>
					<li>第一个02</li>
					<li>第一个02</li>
				</ul>

			<h3 class="hcls">aa000003</h3>
				<ul class="ucls">
					<li>第一个03</li>
					<li>第一个03</li>
					<li>第一个03</li>
				</ul>
		</div>
	</div>
</body>

</html>

书写好html内容然后引入jQuery和css样式

<script src="jquery 2.1.4.js"></script>
<link rel="stylesheet" href="style.css">
样式内容如下：
		body{
			margin: 0;
			padding: 0;
		}
		.ucls{
			list-style: none;
			display: none;
			clear: both;
		}
		.ucls li{
			width: 200px;
			height: 30px;
			line-height: 30px;
			background: #c0c;
			margin: 2px;
			text-align: center;
		}
		.dcls{
			width: 200px;
		}
		.hcls{
			width: 200px;
			height: 40px;
			line-height: 40px;
			background: #ccc;
			margin: 2px;
			padding: 0;
			float: left;
			text-align: center;
			cursor: pointer;
		}

效果如图所示：

最后加入js代码：

<script type="text/javascript">
	$('.ucls').eq(0).css('display','block');  <span style="white-space:pre">					</span>//打开页面时展开第一个导航栏子菜单
	$('.hcls').each(function(i){
			$(this).click(function(){
			$('.ucls').eq(i).slideDown(800).siblings('ul').slideUp(800);<span style="white-space:pre"></span><pre name="code" class="javascript"> <span style="white-space:pre">										</span>//点击导航栏时展开对应的导航栏子菜单，并收起其他的子菜单
});});</script> 



效果如图：






   


                    
                


                

                    

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

                


                

                    JavaScript
                    前端开发
                

                
        

                导航条下拉菜单
            下拉菜单消失
            css下拉菜单教程
            下拉菜单显示
            html5下拉菜单教程
    



                

                    开发者社区 >
                    
                        开发与运维
                         > 
                        文章
                    
                

                

    
                    
            云迁移中心
        
            



            


            

            

                

                

            


            

    

        
作者高分内容

        更多
    

    

        
            我的博客即将入驻“云栖社区”，诚邀技术同仁一同入驻。
            936
        
        
            关于免费虚拟主机的htaccess文件配置出现500错误
            2819
        
        
            Brackets 下配置git教程
            1560
        
        
            利用copy命令制作隐藏惊喜
            949
        
        
            windows下投影仪问题
            1483
        
    




            

                

            

            

                
相关文章

               

                    

                

                

            
                            
            


                

                                            
                                                                           


                

                    n2t3mdveprf54
                    
                                            
                    
                                            
                

            

            
                Element-ui 表格(Table)组件中鼠标悬停（hover）样式修改
            
            
Element-ui 表格(Table)组件中鼠标悬停（hover）样式修改


            

                

                                            637
                                        0
                

                            

        

            

                        

                

            
                                    
                            
            


                

                                            
                                                                           


                

                    rp54yl2b5rw2w
                    
                                            
                    
                                            
                

            

            
                VUE element-ui 之table表格全选框居中对齐
            
            
VUE element-ui 之table表格全选框居中对齐

            

                

                                            285
                                        0
                

                            

        

            

                        

                

            
                                    
                            
            


                

                                            
                                                                           


                

                    rp54yl2b5rw2w
                    
                                            
                    
                                            
                

            

            
                VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
            
            
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改

            

                

                                            1063
                                        0
                

                            

        

            

                        

                

            
                                    
                            
            


                

                                            
                                                                           


                

                    rp54yl2b5rw2w
                    
                                            
                    
                                            
                

            

            
                VUE element-ui之table表格全选框（复选框）隐藏
            
            
VUE element-ui之table表格全选框（复选框）隐藏

            

                

                                            536
                                        0
                

                            

        

            

                        

                

            
                            
            


                

                                            
                                                                           


                

                    我是咔咔
                    
                                            
                    
                                            
                

            

            
                【Layui】下拉框正确样式代码
            
            
【Layui】下拉框正确样式代码

            

                

                                            165
                                        0
                

                            

        

            

                        

                

            
                            
            


                

                                            
                                                                           


                

                    天隆金
                    
                                            
                    
                                            
                

            

            
                CSS3带小图标垂直下拉菜单
            
            

在线演示 本地下载


            

                

                                            1018
                                        0
                

                            

        

            

                        

                

            
                            
            


                

                                            
                                                                           


                

                    天隆金
                    
                                            
                    
                                            
                

            

            
                jQuery多层级垂直手风琴菜单
            
            

在线演示 本地下载


            

                

                                            988
                                        0
                

                            

        

            

                        

                

            
                            
            


                

                                            
                                                                           


                

                    天隆金
                    
                                            
                    
                                            
                

            

            
                jQuery垂直手风琴菜单 菜单项带小图标
            
            

在线演示 本地下载


            

                

                                            953
                                        0
                

                            

        

            

                        

                

            
                            
            


                

                                            
                                                                           


                

                    天隆金
                    
                                            
                    
                                            
                

            

            
                基于jQuery和Bootstrap的手风琴垂直菜单
            
            

在线演示 本地下载


            

                

                                            792
                                        0
                

                            

        

            

                        

                

            
                            
            


                

                                            
                                                                           


                

                    振礼硕晨
                    
                                            
                    
                                            
                

            

            
                jQuery案例demo -- 鼠标移入显示蒙版
            
            

          
            效果展示





效果展示.png

HTML代码：

     
         
         摄影小白成长记
         The best preparation for tomorrow is doing your best today.

            

                

                                            950
                                        0
                

                            

        

            

            

                

            

        


        

            

    

        

            

                

                    
                        
                    
                    

                

                
+关注

            

            

                萧逸雨
                
无执无失

            

        

        

            

                
                
                
文章

            

            

                
                
                
问答

            

        

    



            

    

        
作者高分内容

        更多
    

    

        
            我的博客即将入驻“云栖社区”，诚邀技术同仁一同入驻。
            936
        
        
            关于免费虚拟主机的htaccess文件配置出现500错误
            2819
        
        
            Brackets 下配置git教程
            1560
        
        
            利用copy命令制作隐藏惊喜
            949
        
        
            windows下投影仪问题
            1483
        
    



            
            

    

        
文章排行榜

        

            
最热

            
最新

        

    

    

        

            

                

                    

                        
                            1
                            fastjson2为什么这么快
                            74541
                        
                    

                    

                        
                            2
                            Meetup 报名丨 共话云原生架构升级，微服务x容器开源 Meetup 北京站来啦！
                            64504
                        
                    

                    

                        
                            3
                            CVPR2021 | 视觉推理解释框架VRX：用结构化视觉概念作为解释网络推理逻辑的「语言」
                            63486
                        
                    

                    

                        
                            4
                            结构化总结与结构化思考之《金字塔原理》总结
                            56289
                        
                    

                    

                        
                            5
                            实现人机协同高稳定性，阿里云5G专网IoT方案入选工信部优秀解决方案
                            54099
                        
                    

                    

                        
                            6
                            C语言题解 | 移除元素(多种解法)
                            49963
                        
                    

                    

                        
                            7
                            jasypt-spring-boot敏感信息加密解密利器使用指南
                            47644
                        
                    

                    

                        
                            8
                            快速开发光伏电站数字孪生运维系统（一）
                            44656
                        
                    

                    

                        
                            9
                            DataWorks管控台无法配置PAI引擎临时解决方案
                            42514
                        
                    

                    

                        
                            10
                            Hive数据倾斜的原因以及常用解决方案
                            33179
                        
                    

                    

                        
                            11
                            高并发编程之阻塞队列
                            32723
                        
                    

                    

                        
                            12
                            Spring 事务【隔离级别与传播机制】
                            30484
                        
                    

                    

                        
                            13
                            性能优化之使用vue-worker插件（基于Web Worker）开启多线程运算提高效率
                            29490
                        
                    

                    

                        
                            14
                            计网之初识网络(理解网络传输的基本流程)
                            28008
                        
                    

                    

                        
                            15
                            Android体系课之--LeakCanary内存泄露检测原理解析
                            25929
                        
                    

                    

                        
                            16
                            零基础快速开发Vue图书管理系统—登录注册篇（一）
                            22676
                        
                    

                    

                        
                            17
                            IoT设备数据的存储、解析和价值挖掘实践
                            22645
                        
                    

                    

                        
                            18
                            IoT Studio 物联网可视化应用搭建开发实践
                            21295
                        
                    

                    

                        
                            19
                            开源大数据可观测性方案实践 - 助力集群运维智能化、便捷化
                            16351
                        
                    

                    

                        
                            20
                            快速开发光伏电站数字孪生运维系统（二）
                            14900
                        
                    

                

            

            

        

        

            

                

                    

                        
                            1
                            Flink CDC 专题首发｜每天 10 分钟，解锁新一代数据集成框架
                            148
                        
                    

                    

                        
                            2
                            ChatGPT4 给出数据库开发者最容易犯的 10 个错误和解决方案
                            59
                        
                    

                    

                        
                            3
                            性能最大提升60%，阿里云第八代企业级实例ECS g8i正式上线
                            148
                        
                    

                    

                        
                            4
                            [版本更新]PolarDB-X v2.2.1 生产级关键能力开源升级
                            54
                        
                    

                    

                        
                            5
                            身份证实名认证接口验证不一致的原因
                            113
                        
                    

                    

                        
                            6
                            JVM学习.03 类加载机制
                            102
                        
                    

                    

                        
                            7
                             org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Cannot deserialize instance of `object` out of START_ARRAY token
                            178
                        
                    

                    

                        
                            8
                             Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported
                            215
                        
                    

                    

                        
                            9
                            云原生学习（二）
                            59
                        
                    

                    

                        
                            10
                            官宣｜Apache Flink 1.17 发布公告 
                            376
                        
                    

                    

                        
                            11
                            Java智慧校园电子班牌系统源码 基于Java+springboot+vue+element-ui+mysql开发
                            63
                        
                    

                    

                        
                            12
                            基于阿里云eRDMA的GPU实例大幅提升多机训练性能
                            272
                        
                    

                    

                        
                            13
                            基于阿里云弹性GPU服务的神龙AI加速引擎无缝提升AI训练性能
                            215
                        
                    

                    

                        
                            14
                            重构计算，驱动视界：阿里云视觉计算思考与实践
                            199
                        
                    

                    

                        
                            15
                            如何构建可持续的ChatGPT高性能服务器端架构?
                            61
                        
                    

                    

                        
                            16
                            当一座钢铁森林 变成IoT智能化数据
                            58
                        
                    

                    

                        
                            17
                            阿里巴巴发布《城市数字孪生能力平台总体技术要求》企业标准， 促进数字孪生互联互通生态建设
                            361
                        
                    

                    

                        
                            18
                            docker的安装与镜像
                            63
                        
                    

                    

                        
                            19
                            初识Kafka   
                            72
                        
                    

                    

                        
                            20
                            基础篇丨链路追踪（Tracing）其实很简单
                            170
                        
                    

                

            

            

        

    



            
            

    

        
推荐文章

    

    

        参与OCR文档自学习产品评测，赢Airpods 2
        参与云效代码管理Codeup评测，赢Redmi Watch 3
        参与IoT小程序框架评测，赢CHERRY机械键盘
        乘风者计划邀您入驻社区，精彩权益即刻享
    



            
            
            

    

        
相关电子书

        更多
    

    

        

            

                                      

                    
                                                  
                                           
                   

                                      

                    
                                                  
                                           
                   

                                      

                    
                                                  
                                           
                   

                               

        

        

    

    

               

            
低代码开发师（初级）实战教程

            立即下载
        

                

            
阿里巴巴DevOps 最佳实践手册

            立即下载
        

                

            
冬季实战营第三期：MySQL数据库进阶实战

            立即下载