-第3章 jQuery方法实现下拉菜单显示和隐藏
2024-08-25 10:42:46
知识点
- jquery 的引入方式
- 本地下载引入
- 在线引入
- children 只获取子元素，不获取孙元素
- show() 显示、 hide() 隐藏。
完整代码
<!--
Author: XiaoWen
Create a file: 2017-02-27 11:24:01
Last modified: 2017-02-27 17:16:06
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#nav{
background: #eee;
width: 600px;
height: 40px;
margin: 0 auto;
}
ul{
list-style:none;
}
ul li{
float: left;
line-height: 40px;
text-align: center;
position: relative;
}
a{
text-decoration: none;
color: #000;
display: block;
padding: 0 10px;
height: 40px;
}
a:hover{
color: #fff;
background: #666;
}
ul li ul li{
float: none;
background: #eee;
margin-top: 2px;
}
ul li ul{
position: absolute;
left: 0;
top: 40px;
}
ul li ul li a{
width: 80px;
}
ul li ul li a:hover{
background: #06f;
}
ul li ul{
display: none;
}
ul li:hover ul{
/* display: block; */
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">一级菜单1</a></li>
<li><a href="#">一级菜单2</a></li>
<li>
<a href="#">一级菜单3</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
</ul>
</li>
<li><a href="#">一级菜单4</a></li>
<li><a href="#">一级菜单5</a></li>
<li><a href="#">一级菜单6</a></li>
</ul>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
// $ 等于 jQuery
// $(function(){}) 等于 $(document).ready(function(){})
// 表示整个文档加载完成后再执行相应的函数。
$(function(){
// 选择器 > 表示子元素
$('#nav>ul>li').mouseover(function(){
// children 只获取子元素，不获取孙元素
$(this).children('ul').show()
})
$('#nav>ul>li').mouseout(function(){
$(this).children('ul').hide()
})
})
</script>
</body>
</html>最新文章
- 按日期切割nginx访问日志--及性能优化
- grid style
- --- shell 扩展的顺序
- ***LINUX添加PHP环境变量：CentOS下将php和mysql命令加入到环境变量中
- jquery中ajax方法返回的三种数据类型：text、json、xml；
- atitit.人脸识别的应用场景and使用最佳实践 java .net php
- mongodb配置及简单示例
- Android Develop【转】
- 在Android中用Kotlin的Anko运行后台任务（KAD 09）
- Java Date Classes
- wait与sellp方法区别
- hdu 5475（线段树）
- 如何查看App provision profile文件中的钥匙链访问组名称
- Scala实现Try with resources自动关闭IO
- 分布式任务&分布式锁
- LeetCode 4. Median of Two Sorted Arrays (分治)
- PCA原理解释
- java中JDK环境变量的配置
- SD配置步骤清单
- 文本diff算法Patience Diff