jQuery show hide方法 二级菜单
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>submenu</title>
<style>
* {
margin: 0;
padding: 0;
} ul {
list-style: none;
} li ul {
display: none;
} a {
display: block;
width: 120px;
height: 30px;
line-height: 30px;
text-align: center;
text-decoration: none;
color: black;
background-color: orange;
overflow: hidden;
} a:hover {
background-color: aliceblue;
}
</style>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(function() {
$("ul>li").hover(function() {
// over
$(this).children("ul").show(); }, function() {
// out
$(this).children("ul").hide();
});
})
</script>
</head> <body>
<ul>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul>
<li>
<a href="javascript:void(0);">二级菜单1</a>
</li>
<li>
<a href="javascript:void(0);">二级菜单1</a>
</li>
<li>
<a href="javascript:void(0);">二级菜单1</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单2</a>
<ul>
<li>
<a href="javascript:void(0);">二级菜单2</a>
</li>
<li>
<a href="javascript:void(0);">二级菜单2</a>
</li>
<li>
<a href="javascript:void(0);">二级菜单2</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单3</a>
<ul>
<li>
<a href="javascript:void(0);">二级菜单3</a>
</li>
<li>
<a href="javascript:void(0);">二级菜单3</a>
</li>
<li>
<a href="javascript:void(0);">二级菜单3</a>
</li>
</ul>
</li>
</ul>
</body> </html>
jQuery show hide方法 二级菜单的更多相关文章
- Jquery垂直下拉二级菜单
自己做了一个基于Jquery 的垂直下拉二级菜单功能,直接看图: Html的代码如下: <!DOCTYPE html> <html> <head> <meta ...
- jquery垂直展开折叠手风琴二级菜单
摘要:jquery实现垂直展开二级菜单 最近新开发一个简单项目,用到左侧两级的菜单.找找了手头的文件,竟然没有现成的代码,算了,去网上找找整理下吧. 注:jquery-1.8.3.min.js需要下载 ...
- 前台JS(Jquery)调用后台方法 无刷新级联菜单示例
前台用AJAX直接调用后台方法,老有人发帖提问,没事做个示例 下面是做的一个前台用JQUERY,AJAX调用后台方法做的无刷新级联菜单 http://www.dtan.so CasMenu.aspx页 ...
- python 全栈开发，Day109(客户管理之动态"二级"菜单)
昨日内容回顾 1. 权限有几张表? 2. 简述权限流程? 3. 为什么要把权限放入session? 4. 静态文件和模块文件 5. 相关技术点 - orm查询 - 去空 - 去重 - 中间件 - in ...
- jQuery实现淡入淡出二级下拉导航菜单的方法
本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...
- 用jQuery做一个三级菜单，鼠标移动到二级菜单的选项上，然后再迅速离开后，当鼠标再移动到该一级菜单或其他二级菜单选项，三级菜单也会显示。
用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示. 原因:在为一个元素绑定hover事件之后,用户把光标移入元素 ...
- 转：jQuery弹出二级菜单
<html> <head> <meta http-equiv="content-type" content="text/html; char ...
- JQuery 支持 hide 和 show 事件的方法与分析
问题提出 JQuery不支持hide和show作为事件形式出现, 实际上这两个仅仅是JQuery对象的一个方法(fn): 有一类UI交互需求,根据一个DOM对象的或者显示对附属的DOM对象做相同操作 ...
- 二级菜单jquery
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- HDFS读数据的过程
- 矩阵快速幂求Fibonacci
原理 我们取矩阵A 则 F1=F2=1;则可以轻易求出F(i) #define maxn 2 #define mo 1000000007 struct Matrix{ long long a[maxn ...
- hdu6243
hdu6243结论题,每个的概率是(n-1)/n,然后乘以总数n,结果就是 n-1 #include<iostream> #include<cstdio> #include&l ...
- JS数组的相关方法
数组创建 JavaScript中创建数组有两种方式,第一种是使用 Array 构造函数: ? 1 2 3 var arr1 = new Array(); //创建一个空数组 var arr2 = ne ...
- Linux 文本处理三剑客之grep
文本处理都要使用正则表达式,正则表达式有: 基本正则表达式:grep或者egrep -G 扩展正则表达式:egreo或者grep -E Linux 文本处理三剑客: sed:stream editor ...
- Boost Asio教程集合
http://zh.highscore.de/cpp/boost/ 第七章 https://mmoaay.gitbooks.io/boost-asio-cpp-network-programming- ...
- PyCharm常用技巧集合
PyCharm常用技巧集合 一.添加或者修改文件模板 File>settings>Editor>File and Code Templates>Python Script 你可 ...
- GitHub and Git
book:https://git-scm.com/book/zh/v2 Git使用简易指南:https://www.bootcss.com/p/git-guide
- IIS 配置问题
1 IIS错误需要重新运行配置 重新注册.netframework. 解决方式:cmd C:\Windows\Microsoft.NET\Framework\v4.0.30319 aspnet_r ...
- PHP的生成图片或文字水印的类
ImageWatermark.php <?php /*********************************************************** 类名:ImageWat ...