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 IO 特性详解（1）【数据完整性】
本文结合hadoop : the definitive guide精心而作,包含作者的心血,希望可以帮助大家理解一点hdfs的皮毛,足矣.(charles@xingbod.cn) hadoop本身自带 ...
- layui -page 分页类
<?phpnamespace page; // +---------------------------------------------------------------------- / ...
- hdu6243
hdu6243结论题,每个的概率是(n-1)/n,然后乘以总数n,结果就是 n-1 #include<iostream> #include<cstdio> #include&l ...
- 01Redis入门指南笔记(简介、安装、配置)
一:简介 Redis是一个开源的高性能key-value数据库.Redis是Remote DIctionary Server(远程字典服务器)的缩写,它以字典结构存储数据,并允许其他应用通过TCP协议 ...
- java中error和exception的区别
转自:https://www.jianshu.com/p/e8bbee3c1c4a Error类和Exception类的父类都是throwable类,他们的区别是: Error类一般是指与虚拟机相关的 ...
- Django项目：CRM(客户关系管理系统)--40--32PerfectCRM实现King_admin添加不进行限制
# forms.py # ————————19PerfectCRM实现King_admin数据修改———————— from django import forms from crm import m ...
- mysql8 navicat
先把root账户的加密规则改回去 ALTER USER 'root'@'localhost' IDENTIFIED BY 'password' PASSWORD EXPIRE NEVER; 然后使用新 ...
- [jnhs]教训之jsp页面无法用jstl取值的坑.真他妈的奇葩,实体类的属性名不能用大写
结果页面永远都是空 调试发现,数据正常的塞进去了 问题解决: https://zhidao.baidu.com/question/570584436.html 实体类的属性名,首字母不能大写,改成小写 ...
- netbeans生成的maven工程没有web.xml文件 如何新建
使用netbeans生成的maven工程没有web.xml 需要自己新建 步骤: 下一步,完成
- idea中使用本地jar包
一个maven项目中使用到了taobao-sdk-java-auto_1455552377940-20160422.jar包,项目是直接导入的jar包而没用用maven的形式导入,导致在idea编辑时 ...