-第2章 JS方法实现下拉菜单显示和隐藏
知识点
onmouseover 鼠标经过
onmouseout 鼠标移出
function 关键字
getElementsByTagName 获取一组标签
length 获取对象成员个数
思路
给一级菜单添加鼠标事件,经鼠标在一级菜单上时,显示下面的二级菜单。但是在处理二级菜单之前,先通过 length 判断一下有没有二级菜单。
为什么要判断?
因为比如像 ul.getElementsByTagName('li')
这样的方式获取到的是所有 ul 下面的所有 li, 这个 li 可能有很多层。
完整代码
<!--
Author: XiaoWen
Create a file: 2017-02-27 11:24:01
Last modified: 2017-02-27 16:22:00
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#nav{
background: #eee;
width: 600px;
height: 40px;
margin: 0 auto;
}
ul{
list-style:none;
}
ul li{
float: left;
line-height: 40px;
text-align: center;
position: relative;
}
a{
text-decoration: none;
color: #000;
display: block;
padding: 0 10px;
height: 40px;
}
a:hover{
color: #fff;
background: #666;
}
ul li ul li{
float: none;
background: #eee;
margin-top: 2px;
}
ul li ul{
position: absolute;
left: 0;
top: 40px;
}
ul li ul li a{
width: 80px;
}
ul li ul li a:hover{
background: #06f;
}
ul li ul{
display: none;
}
ul li:hover ul{
/* display: block; */
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">一级菜单1</a></li>
<li><a href="#">一级菜单2</a></li>
<li>
<a href="#">一级菜单3</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
</ul>
</li>
<li><a href="#">一级菜单4</a></li>
<li><a href="#">一级菜单5</a></li>
<li><a href="#">一级菜单6</a></li>
</ul>
</div>
<script>
window.onload=function(){
var a_li=document.getElementsByTagName('li');
for(var i=0;i<a_li.length;i++){
//获取 li 下面的 二级菜单 ul ,
//如果能获取到的个数是 1 个以上,
//条件成立,把 li 下面 的 二级菜单 ul 显示。
if(a_li[i].getElementsByTagName('ul').length){
a_li[i].onmouseover=function(){
this.getElementsByTagName('ul')[0].style.display="block"
}
a_li[i].onmouseout=function(){
this.getElementsByTagName('ul')[0].style.display="none"
}
}
}
}
</script>
</body>
</html>
总结
css 中的鼠标伪类已经注释了的 ul li:hover ul{/* display: block; */}
,现在是用 js 实现,所以用不着这个鼠标伪类了。
通过这种方法写的 js 下拉菜单,可以避免 ie6 下的不支持非 a 标签伪类的情况。
-第2章 JS方法实现下拉菜单显示和隐藏的更多相关文章
- -第3章 jQuery方法实现下拉菜单显示和隐藏
知识点 jquery 的引入方式 本地下载引入 在线引入 children 只获取子元素,不获取孙元素 show() 显示. hide() 隐藏. 完整代码 <!-- Author: XiaoW ...
- -第1章 HTMLCSS方法实现下拉菜单
中英文的自动换行问题 把下面代码中的 javascript 改成 子菜单1 试试, 如果英文的话宽度会自动撑开, 用中文不会, 而直接转行下来. <ul> <li><a ...
- JS列表的下拉菜单组件(仿美化控件select)
JS列表的下拉菜单组件(仿美化控件select) 2014-01-23 23:51 by 龙恩0707, 1101 阅读, 6 评论, 收藏, 编辑 今天是农历23 也是小年,在这祝福大家新年快乐!今 ...
- IE6 下绝对定位position:absolute 与浮动不显示 (IE6 下拉菜单显示)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD& ...
- bootstrap悬停下拉菜单显示
使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链 ...
- layui编辑商品时,怎么使用下拉菜单显示商品默认分类的问题
//加载商品默认的分类$.get('/admin/category/selec/' + {$simple.0.first_pid},function(msg){ $("#two_cate&q ...
- django 下拉菜单显示为object的解决办法
在创建完Django数据库结构之后,使用Django自带的强大的admin功能往数据库中添加数据,图形化界面如下: 但时候有下拉框选项(只要在model中有定义Charfield就会显示为下拉框),如 ...
- 下拉框 显示name 隐藏code
暂未做详细整理, 后期有机会完善 jsp 是否有效: <s:select id="queryIsValid" name="configBean.queryIsVal ...
- js代码实现下拉菜单
效果 js代码: <script type="text/javascript"> function ShowSub(li) {//函数定义 var subMenu = ...
随机推荐
- 【Alpha版本】冲刺阶段——Day2
[Alpha版本]冲刺阶段--Day2 阅读目录 今日进展 问题困难 明日任务 今日贡献量 站立式会议 TODOlist [今日进展] 密码算法方面: 存储密码的步骤 使用CSPRNG生成一个长度足够 ...
- Linux基础命令---netstat显示网络状态
netstat netstat指令可以显示当前的网络连接.路由表.接口统计信息.伪装连接和多播成员资格等信息. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.open ...
- Linux基础命令---检查密码文件pwck
pwck 检查用户密码文件“/etc/passwd”和“/etc/shadow”的完整性,将验证结果送到标砖输出.提示用户删除格式不正确或有其他不可更正错误的条目.检查以验证每个条目是否具有:正确的字 ...
- linux 开始
3306 -- mysql 8000--django默认 服务由端口控制 https -- 443 http -- 80 linux发行版:1.centos 免费版的redhat2.ubuntu 乌版 ...
- QT -- plan
QT -- 跨平台的 C++ 图形用户界面 应用程序框架 GUI介绍框架项目文件 .pro第一个QT (hello QT)父窗口 和 子窗口的区别(控件,部件,构件)信号 和 槽(信号的处理 ...
- 文本tfidf
文本分类tf:词的频率 idf:逆文档频率 代码实例: # tf idf from sklearn.feature_extraction.text import TfidfVectorizer imp ...
- SQL Server 2012中的AlwaysOn尝试
简介 SQL Server2012中新增的AlwaysOn是一个新增高可用性解决方案.在AlwaysOn之前,SQL Server已经有的高可用性和数据恢复方案,比如数据库镜像,日志传送和故障转移 ...
- 深入理解HashMap+ConcurrentHashMap的扩容策略
前言 理解HashMap和ConcurrentHashMap的重点在于: (1)理解HashMap的数据结构的设计和实现思路 (2)在(1)的基础上,理解ConcurrentHashMap的并发安全的 ...
- 细数那些不懂Spring底层原理带来的伤与痛
1. 什么是spring? Spring 是个Java企业级应用的开源开发框架.Spring主要用来开发Java应用,但是有些扩展是针对构建J2EE平台的web应用.Spring 框架目标是简化Jav ...
- Linux下的Jmeter运行测试
本文主要介绍Jmeter脚本如何在Linux通过no GUI的方式运行.总共分三部分: 1.Linux下JDK的安装及环境变量的配置 2.Linux下Jmeter的安装及环境变量的配置 3.运行结果的 ...