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 ...
随机推荐
- 火狐插件hostadmin
windows的host文件: c:\Windows\System32\drivers\etc\hosts 手动修改hosts文件费时又费力,可直接在FF附加组件中搜索hostadmin下载安装: ...
- 前端（Node.js）（2）-- Node.js开发环境配置
1.开发环境介绍 1.MEAN Stack 什么是全栈? 负责界面和UI的设计师.负责移动端应用开发的安卓IOS开发工程师.负责服务器端开发的后端程序员.负责数据库开发和管理的数据库工程师.负责服务器 ...
- 读书笔记--Spring in Action 目录
1.Spring之旅 1.1 简化java 开发 1.1.1 激发pojo 的潜能 1.1.2 依赖注入1.1.3 应用切面1.1.4 使用模板消除样板式代码1.2 容纳你的bean1.2.1 与应用 ...
- 在centos 6.3系统下安装java、tomcat环境的方法与步骤（方法经过验证，可安装成功）
一.安装java1. 下载java二进制安装包 wget --no-cookies --no-check-certificate --header "Cookie: gpw_e24=http ...
- setStorage、getStorage、 removeStorage 封装
// 本地存储 setStorage(name, data){ let dataType = typeof data; // json对象 if(dataType === 'object'){ win ...
- vue渲染学生信息
渲染学生信息 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- Centos7.2源码编译安装LA(N)MP
LAMP环境中php是作为apache的模块安装的,所以安装顺序是php放在apache的后面安装,这样便于安装php时可以在apache的模块目录生成对应的php模块. apache版本:2.4.3 ...
- jQuery中的工具和插件
jQuery的工具属性 jQuery类数组操作 length属性 表示获取类数组中元素的个数 get()方法 表示获取类数组中单个元素"括号中填写该元素的索引值" index()方 ...
- vue 数组遍历方法forEach和map的原理解析和实际应用
一.前言 forEach和map是数组的两个方法,作用都是遍历数组.在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例. 二.代码 1. 相同点 都是数组的方法 都用来遍历数组 ...
- 会话技术之cookie（记录当前时间、浏览记录的记录和清除）
cookie 会话技术: 当用户打开浏览器的时候,访问不同的资源,直到用户将浏览器关闭,可以认为这是一次会话. 作用: 因为http协议是一个无状态的协议,它不会记录上一次访问的内容.用户在访问过程中 ...