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 ...
随机推荐
- php实现的支持断点续传的文件下载类
通常来说,php支持断点续传,主要依靠HTTP协议中 header HTTP_RANGE实现. HTTP断点续传原理: Http头 Range.Content-Range()HTTP头中一般断点下载时 ...
- 阿里云CDN上线 WAF，一站式提供分发+安全能力
CDN是业界公认的加速网站访问效率.提升用户体验的内容分发加速产品.Gartner预测2019年超过50%的互联网流量将通过CDN内容分发网络进行加速. 然而,越来越多企业也意识到恶意网络攻击对非凡用 ...
- python 升级后正确安装 pip
由于服务器的python 版本是2.6.6 , 为了使用 twisted 升级至 2.7.13 , 如果此时直接用 yum install python-pip 安装 pip, 则实际pip 会安装在 ...
- Dockerfile 编写
转: https://blog.fundebug.com/2017/05/15/write-excellent-dockerfile/如何编写最佳的Dockerfile 译者按: Dockerfile ...
- JEECMS自定义标签开发步骤
JEECMS自带的只有[@cms_advertising]标签,并且官方没有给文档,用法: [@cms_advertising id='3'] <img src=&quo ...
- 笔记本最小安装centos7 连接WiFi的方法
1.首先下载iw工具. yum -y install iw 2.获取无线网卡的名称 执行iw dev,假设获得名称为 wlp3s0(示例) 3.激活无线网络接口 执行ip link set wlp3s ...
- Pycharm如何在控制台输出窗口中使用Python解释器
打开菜单栏run->edit configurations,把下图中的复选框选中就可以了.
- 2018-8-10-安装-wordpress-出现-抱歉，我不能写入wp-config.php文件
title author date CreateTime categories 安装 wordpress 出现 抱歉,我不能写入wp-config.php文件 lindexi 2018-08-10 1 ...
- NOIP模拟 6.30
Problem 1 护花(flower.cpp/c/pas) [题目描述] 约翰留下他的N(N<=100000)只奶牛上山采木．他离开的时候,她们像往常一样悠闲地在草场里吃草．可是,当他回来的时 ...
- FTP权限问题解析,553 Can't open that file: Permission denied
FTP上传文件,提示553 Can't open that file: Permission denied 原因: 目录的所属组,所属用户属于root, 导致FTP无法上传, 修改组和所属用户为www ...