-第5章 多级菜单
知识点
使用 jquery 的 has() 选择包含指定后代的元素。
三级菜单
一般情况下，会做三级菜单，那么四级五级...就会做了。但是在实际应用中，有三级以上的级菜单是很少见的，因为那样对用户影响不好。
ie6 非 a 标签伪类兼容
方法一，使用 csshover.htc 文件
在 body 中引用它：
body{
behavior:url(csshover.htc);
}
方法二，针对 ie6 使用 js 的鼠标事件
判断出 ie 6 的 js:
var isIE=!!window.ActiveXObject;
var isIE6=isIE && !window.XMLHttpRequest;
吐嘈：
既然可以用鼠标事件，干嘛不全部用鼠标事件？
回答A：
我竟无言以对。
回答B：
不是说兼容吗？这就是兼容呀。
吐嘈：
我竟无言以对。
js 实现，完整代码
可能需要定义一下 dtd 。
<!--
Author: XiaoWen
Create a file: 2017-02-27 17:21:07
Last modified: 2017-02-27 19:29:05
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.top-nav{
font-size:12px;
font-weight: bold;
list-style:none;
}
.top-nav li{
float: left;
margin-right: 1px;
}
.top-nav li a{
line-height: 20px;
text-decoration: none;
background: #ddd;
color: #666;
display: block;
width: 80px;
text-align: center;
}
.top-nav li a:hover{
background: #f00;
color: #fff;
}
/* 隐藏二级三级菜单 */
.top-nav li ul{
display: none;
list-style: none;
padding: 0;
margin: 0;
position: relative;
width: 80px;
}
.top-nav li ul li ul{
top: 0;
left: 80px;
position: absolute;
}
/* css 关键代码 */
.top-nav li:hover ul{
display: block;
}
.top-nav li:hover ul li ul{
display: none;
}
.top-nav li ul li:hover ul{
display: block;
}
</style>
</head>
<body>
<ul class="top-nav">
<li>
<a href="#">一级菜单+</a>
<ul>
<li>
<a href="#">二级菜单+</a>
<ul>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
</ul></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li><a href="#">一级菜单</a></li>
</ul>
<script>
window.onload=function(){
var isIE=!!window.ActiveXObject;
var isIE6=isIE && !window.XMLHttpRequest;
if(isIE6){
var Lis=document.getElementsByTagName('li');
for(var i=0;i<Lis.length;i++){
Lis[i].onmouseover=function(){
var u=this.getElementsByTagName('ul')[0];
if(u != undefined){
u.style.display="block";
}
}
Lis[i].onmouseout=function(){
var u=this.getElementsByTagName('ul')[0];
if(u != undefined){
u.style.display="none";
}
}
}
}
}
</script>
</body>
</html>
jq 实现，完整代码
<!--
Author: XiaoWen
Create a file: 2017-02-27 17:21:07
Last modified: 2017-02-27 19:42:52
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.top-nav{
font-size:12px;
font-weight: bold;
list-style:none;
}
.top-nav li{
float: left;
margin-right: 1px;
}
.top-nav li a{
line-height: 20px;
text-decoration: none;
background: #ddd;
color: #666;
display: block;
width: 80px;
text-align: center;
}
.top-nav li a:hover{
background: #f00;
color: #fff;
}
/* 隐藏二级三级菜单 */
.top-nav li ul{
display: none;
list-style: none;
padding: 0;
margin: 0;
position: relative;
width: 80px;
}
.top-nav li ul li ul{
top: 0;
left: 80px;
position: absolute;
}
/* css 关键代码 */
/*
.top-nav li:hover ul{
display: block;
}
.top-nav li:hover ul li ul{
display: none;
}
.top-nav li ul li:hover ul{
display: block;
}
*/
</style>
</head>
<body>
<ul class="top-nav">
<li>
<a href="#">一级菜单+</a>
<ul>
<li>
<a href="#">二级菜单+</a>
<ul>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
</ul></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li><a href="#">一级菜单</a></li>
</ul>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(function(){
$('li').has('ul').mouseover(function(){
$(this).children('ul').show()
}).mouseout(function(){
$(this).children('ul').hide()
})
})
</script>
</body>
</html>
拓展 判断 ie6/7/8
var isIE = !!window.ActiveXObject;
var isIE6 = isIE && !window.XMLHttpRequest;
var isIE8 = isIE && !!document.documentMode;
var isIE7 = isIE && !isIE6 && !isIE8;
if (isIE) {
if (isIE6) {
alert("ie6");
} else if (isIE8) {
alert("ie8");
} else if (isIE7) {
alert("ie7");
}
}
仅6个字节判断 ie6/7/8
var isIE = !-[1,];
2010年1月，一位俄国人利用了IE与标准浏览器在处理数组的toString方法的差异，仅6bytes就完美完成了是否IE浏览器的检测。
注： !-[1,] 只能判断 ie6/7/8 ，不能判断 ie9 。
jq判断
在 jq1.8 之前可以使用以下 api 判断：
if($.browser.msie && $.browser.version.substr(0,1)<7){//ie6}
在 jq1.9 中：
if (!$.support.leadingWhitespace) {//IE8以下}
jq2.0 不支持 ie6/7/8 。
