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 ...
随机推荐
- Hadoop 集群硬件配置
- LA2965 Jurassic Remains
Jurassic Remains https://vjudge.net/problem/UVALive-2965 Paleontologists in Siberia have recently fo ...
- 设置mysql二进制日志过期时间
((none)) > show variables like 'expire_logs_days'; +------------------+-------+ | Variable_name | ...
- 02Redis入门指南笔记(基本数据类型)
一:热身 获得符合规则的健名列表:keys pattern pattern支持glob风格的通配符,具体规则如下表: Redis命令不区分大小写.keys命令需要遍历Redis中的所有健,当键的数量 ...
- oracle习题练习-表空间-用户-表-约束
题一 1. 创建名字为hy_tablespace的表空间,默认大小为10M;@@ 2. 创建一个用户,用户名以自己名字命名,并指定命名空间为hy_tablespace;@@@@ ...
- 2018-2-13-C＃-相对路径转绝对路径
title author date CreateTime categories C# 相对路径转绝对路径 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17:23 ...
- NIOP模拟17.10.13
太水,简述一下题意 T1 让你计算一个形如Σai * bi^ki 快速幂即可 #include <iostream> #include <cstdio> #include &l ...
- 洛谷P2835 刻录光盘 [2017年6月计划 强连通分量02]
P2835 刻录光盘 题目描述 在JSOI2005夏令营快要结束的时候,很多营员提出来要把整个夏令营期间的资料刻录成一张光盘给大家,以便大家回去后继续学习.组委会觉得这个主意不错!可是组委会一时没有足 ...
- 启动Hadoop时，DataNode启动后一会儿自动消失的解决方法
查看slaver1/2的logs,发现 FATAL org.apache.hadoop.hdfs.server.datanode.DataNode: Initialization failed for ...
- JavaScript-JQ实现自定义滚动条插件1.0
此滚动条仅支持竖向(Y轴) 一.Css /*这里是让用户鼠标在里面不能选中文字,避免拖动的时候出错*/ body { -moz-user-select: none; /*火狐*/ -webkit-us ...