导航菜单（动画）--- jQuery
2024-09-07 05:46:14
本文章实现是一个导航菜单的功能
（1）点击当前菜单显示二级菜单，再次点击收起当前菜单。
（2）当有一个二级菜单显示，点击其他菜单，上一个已点击菜单会收起。只展示当前点击的菜单，只显示一个菜单，类似手风琴的效果。
效果:
实现步骤：
1、html代码：
<div class="menu">
<div class="nav">
<!-- 一级菜单 -->
<ul>
<li>
<div>一级菜单A</div>
<!-- 二级菜单 -->
<ol>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ol>
</li>
</ul>
<ul>
<li>
<div>一级菜单B</div>
<ol>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ol>
</li>
</ul>
<ul>
<li>
<div>一级菜单C</div>
<ol>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ol>
</li>
</ul>
</div>
</div>
2、css代码：
body{
margin: 0;
}
ul, ol{
padding: 0;
margin: 0;
list-style: none;
}
.menu{
width: 1200px;
margin-left: 200px;
}
.nav{
width: 1200px;
}
.nav ul{
width: 200px;
}
.nav ul > li{
width: 200px;
}
.nav ul > li div{
width: 200px;
height: 40px;
/* lh40px */
line-height: 40px;
/* bgc */
background-color: #800080;
color: #fff;
/* tac */
text-align: center;
cursor: pointer;
}
.nav ul > li > ol {
width: 180px;
margin: 0 auto;
background-color: #f0f0f0;
display: none;
}
.nav ul > li > ol li{
height: 40px;
line-height: 40px;
text-align: center;
border-bottom: 2px solid #1E90FF;
}
.nav ul > li > ol li:hover{
/* 鼠标悬浮二级菜单显示的颜色 */
background-color: #9370DB;
}
3、脚本部分：
// 要先引入jq文件才书写自己的jq代码
1 <script src="../../jquery/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// 给所有的一级菜单添加点击事件
$(".nav ul > li div").click(function(){
// console.log(this); this指向当前点击的div(一级菜单)
// 当前点击的一级菜单下拉
$(this).parent().find("ol").slideToggle(1000)
// 收起菜单 slideUp() 收起
// jq的链式操作
$(this).parent().parent().siblings().find("ol").slideUp(1000);
// 设置一级菜单的背景颜色
$(".nav ul > li div").css("backgroundColor", "#800080");
// 当前点击的li高亮（当前点击的菜单高亮）
$(this).css("backgroundColor","#1E90FF");
})
})
</script>
文章到此结束。。。
最新文章
- python中的正则表达式
- 那些可能被你忽略的MySQL优化技巧
- php概率算法（转）
- spring 缓存（spring自带Cache）（入门）
- 后勤数据抽取流程图 Logistic Data Extraction
- javascript和jquery中获取列表的索引
- chgrp命令
- java数据结构-非线性结构之树
- IOS版新闻客户端应用源码项目
- C++ Primer 学习笔记_88_用于大型程序的工具 --异常处理[续1]
- 承诺消费换4G无线上网伴侣活动火热来袭，各指定营业厅即可办理
- tar.gz文件命名和压缩解压方法
- 在Windows如何解决下Cocos2d-x示例代码TestCpp我找不到lib问题库文件
- Android环境搭建与HelloWorld
- JavaScript函数节流和函数防抖之间的区别
- [Error]Python虚拟环境报错 OSError: setuptools pip wheel failed with error code 2
- JQuery+Ajax实战三级下拉列表联动（八）
- R语言 set.seed()函数
- （惊艳）对象序列化和反序列--Hibernate的查询和新增极其相似
- php加速缓存器opcache，apc，xcache，eAccelerator