关于展开关闭层在firefox下兼容问题,请教高手
时间:2010-09-25
来源:互联网
HTML代码如下:
<div id="category-wrap">
<ul id="categorynav">
<li><h4>WALL CABINETS</h4>
<div>
<a href="#">Wall Standard 12" D</a>
<a href="#">Wall Standard 15" D</a>
<a href="#">Wall Refrigerator 24" D</a>
<a href="#">Wall Corner</a>
<a href="#">Wall Blind</a>
<a href="#">Wall Peninsula</a>
<a href="#">Wall Specialty</a>
<a href="#">Glass Door Cabinets</a>
</div></li>
<li><h4>BASE CABINETS</h4>
<div style="display:none;">
<a href="#">Base Corner</a>
<a href="#">Base Sink Base</a>
<a href="#">Base Peninsula</a>
<a href="#">Base Specialty</a>
</div></li>
<li><h4>PANTRY CABINETS</h4>
<div style="display:none;">
<a href="#">Pantry Standard 12" D</a>
<a href="#">Pantry Standard 24" D</a>
<a href="#">Pantry Roll-Out Tray</a>
<a href="#">Pantry Specialty</a>
</div></li>
<li><h4>VANITY CABINETS</h4>
<div style="display:none;">
<a href="#">Vanity 34.5" H</a>
<a href="#">Vanity 34.5" H Full Height</a>
<a href="#">Vanity 31" H</a>
<a href="#">Vanity Specialty</a>
</div></li>
<li><h4>ACCESSORIES</h4>
<div style="display:none;">
<a href="#">Accessory Panels</a>
<a href="#">Accessory Decorative Doors</a>
<a href="#">Accessory Accent Pieces</a>
<a href="#">Accessory Face Frame Only</a>
<a href="#">Accessory Parts</a>
</div></li>
</ul>
</div>
CSS部分代码:
#category-wrap {width:194px; float:left; overflow:hidden;}
#categorynav {list-style-type:none; margin:0; padding:0;}
#categorynav h4 {width:194px; font-size:12px; color:#969696; cursor
ointer; height:37px; line-height:37px; background-color:#2d2d2d; margin:2px 0 0 0; padding-left:10px;font-weight:bold;}
#categorynav a {color:#969696; width:194px; height:37px; line-height:37px; display:block; background-color:#222; text-decoration:none; margin-top:2px; font-weight:normal; padding-left:20px;}
#categorynav a:hover, #categorynav a.current {color:#c8c8c8; text-decoration:none; background:none;}
调用的JS代码:
var lastClick;
var lastSubClick;
window.onload=function(){
var nav = document.getElementById("categorynav");
nav.onclick = function (e){
var src = e? e.target:event.srcElement;
var oStyle = src.nextSibling.style;
if (src.tagName == "H4"){
if (lastClick == src){
oStyle.display = "none";
src.style.backgroundPosition = "0px 0px";
lastClick = null;
}else{
if (lastClick){
lastClick.nextSibling.style.display = "none";
lastClick.style.backgroundPosition = "0px 0px";
}
oStyle.display = "block";
src.style.backgroundPosition = "0px 0px";
lastClick = src;
}
}else if(src.tagName == "A"){
if (lastSubClick){
lastSubClick.className = "";
}
src.className = "current";
lastSubClick = src;
}
src.blur();
}
nav.onmouseout = function (e){
var src = e?e.target:event.srcElement;
if (src.tagName == "H4"){
src.style.backgroundColor = "#2d2d2d";
src.style.color = "#969696";
}
}
nav.onmouseover = function (e){
var src = e?e.target:event.srcElement;
if (src.tagName == "H4"){
src.style.backgroundColor = "";
src.style.color = "#c8c8c8";
}
}
}
现在的问题是,在IE下都正常,但是在FF和safari chrome等浏览器下,点击没反应。不能展开关闭层的。
<div id="category-wrap">
<ul id="categorynav">
<li><h4>WALL CABINETS</h4>
<div>
<a href="#">Wall Standard 12" D</a>
<a href="#">Wall Standard 15" D</a>
<a href="#">Wall Refrigerator 24" D</a>
<a href="#">Wall Corner</a>
<a href="#">Wall Blind</a>
<a href="#">Wall Peninsula</a>
<a href="#">Wall Specialty</a>
<a href="#">Glass Door Cabinets</a>
</div></li>
<li><h4>BASE CABINETS</h4>
<div style="display:none;">
<a href="#">Base Corner</a>
<a href="#">Base Sink Base</a>
<a href="#">Base Peninsula</a>
<a href="#">Base Specialty</a>
</div></li>
<li><h4>PANTRY CABINETS</h4>
<div style="display:none;">
<a href="#">Pantry Standard 12" D</a>
<a href="#">Pantry Standard 24" D</a>
<a href="#">Pantry Roll-Out Tray</a>
<a href="#">Pantry Specialty</a>
</div></li>
<li><h4>VANITY CABINETS</h4>
<div style="display:none;">
<a href="#">Vanity 34.5" H</a>
<a href="#">Vanity 34.5" H Full Height</a>
<a href="#">Vanity 31" H</a>
<a href="#">Vanity Specialty</a>
</div></li>
<li><h4>ACCESSORIES</h4>
<div style="display:none;">
<a href="#">Accessory Panels</a>
<a href="#">Accessory Decorative Doors</a>
<a href="#">Accessory Accent Pieces</a>
<a href="#">Accessory Face Frame Only</a>
<a href="#">Accessory Parts</a>
</div></li>
</ul>
</div>
CSS部分代码:
#category-wrap {width:194px; float:left; overflow:hidden;}
#categorynav {list-style-type:none; margin:0; padding:0;}
#categorynav h4 {width:194px; font-size:12px; color:#969696; cursor

#categorynav a {color:#969696; width:194px; height:37px; line-height:37px; display:block; background-color:#222; text-decoration:none; margin-top:2px; font-weight:normal; padding-left:20px;}
#categorynav a:hover, #categorynav a.current {color:#c8c8c8; text-decoration:none; background:none;}
调用的JS代码:
var lastClick;
var lastSubClick;
window.onload=function(){
var nav = document.getElementById("categorynav");
nav.onclick = function (e){
var src = e? e.target:event.srcElement;
var oStyle = src.nextSibling.style;
if (src.tagName == "H4"){
if (lastClick == src){
oStyle.display = "none";
src.style.backgroundPosition = "0px 0px";
lastClick = null;
}else{
if (lastClick){
lastClick.nextSibling.style.display = "none";
lastClick.style.backgroundPosition = "0px 0px";
}
oStyle.display = "block";
src.style.backgroundPosition = "0px 0px";
lastClick = src;
}
}else if(src.tagName == "A"){
if (lastSubClick){
lastSubClick.className = "";
}
src.className = "current";
lastSubClick = src;
}
src.blur();
}
nav.onmouseout = function (e){
var src = e?e.target:event.srcElement;
if (src.tagName == "H4"){
src.style.backgroundColor = "#2d2d2d";
src.style.color = "#969696";
}
}
nav.onmouseover = function (e){
var src = e?e.target:event.srcElement;
if (src.tagName == "H4"){
src.style.backgroundColor = "";
src.style.color = "#c8c8c8";
}
}
}
现在的问题是,在IE下都正常,但是在FF和safari chrome等浏览器下,点击没反应。不能展开关闭层的。
作者: rodychan 发布时间: 2010-09-25
有人么?

作者: rodychan 发布时间: 2010-09-25
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读:74
-
如何安装mysql8.0
阅读:31
-
Word快速设置标题样式步骤详解
阅读:28
-
20+道必知必会的Vue面试题(附答案解析)
阅读:37
-
HTML如何制作表单
阅读:22
-
百词斩可以改天数吗?当然可以,4个步骤轻松修改天数!
阅读:31
-
ET文件格式和XLS格式文件之间如何转化?
阅读:24
-
react和vue的区别及优缺点是什么
阅读:121
-
支付宝人脸识别如何关闭?
阅读:21
-
腾讯微云怎么修改照片或视频备份路径?
阅读:28