+ -
当前位置:首页 → 问答吧 → 关于展开关闭层在firefox下兼容问题,请教高手

关于展开关闭层在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; cursorointer; 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等浏览器下,点击没反应。不能展开关闭层的。

作者: rodychan   发布时间: 2010-09-25

有人么?

作者: rodychan   发布时间: 2010-09-25