Question

#menu ul li.sfhover ul 的JS代码如何改成 .nav ul li.sfhover ul

做二级下拉列表，IE6不支持li伪类，所以要用JS解决，但是我不会JS，下面是#menu ul li.sfhover ul 的JS代码，因为我导航是左右2部分，所以要用class，忘高手帮改一下，改成 .nav ul li.sfhover ul 的JS代码~先拜谢了~！

<script type=text/javascript>
function menuFix() {
var sfEls = document.getElementById("menu").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
"");
}
}
}
window.onload=menuFix;
</script>

Answer 1

单从你给出的这些文字描述，我可以理解成：
你给出的这段js已经可以满足你的UI交互需求，只是，你的css用的是类别选择器，而不是ID选择器？

为何不将你的CSS从.nav 改成#menu?

楼上的方法适用所有浏览器（IE6+，以及Firefox/Chrome/SafariOpera等主流），但更好的方法是：只有IE8以下浏览器的时候才加载以下Js，而Ie8以上的js,获取js 选择器的方法可以用querySelector("类选择器的名字")，
querySelectorAll("类选择器的名字")来取到对应的dom,这样的话，效率得到了极大的提升，代码量也少了很多

<script type='text/javascript'>
var gTagName='div'; //输入你导航元素的名称
var gClassName='nav'; //输入你导航类的名字
function menuClass()
{
var elements=document.getElementsByTagName(gTagName);
for(var j=0,i=elements.length;j<i;j++)
{
var element=elements[j];
var classname=element.className;
if(classname.indexOf(gClassName)!=-1)
{
menuFix(elements[j]);
}
}
}
function menuFix(a)
{
var sfEls = a.getElementsByTagName("li");
for (var i=0,l=sfEls.length; i<l; i++)//这里也要用变量保存length,这样效率也会好一点
{
sfEls[i].onmouseover=function() {this.className+=(this.className.length>0? " ": "") + "sfhover";}
sfEls[i].onMouseDown=function() {this.className+=(this.className.length>0? " ": "") + "sfhover";}
sfEls[i].onMouseUp=function() {this.className+=(this.className.length>0? " ": "") + "sfhover";}
sfEls[i].onmouseout=function() {this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");}
}
}
window.onload=menuClass;
</script>

追问

上面已经说了，导航分2部分，左浮和右浮。CSS是.是类nav来控制导航的各种属性，而ID选择器控制浮动。 我用了上面这个，虽然没提示错误了，但是IE6下二级导航还是没出现啊……郁闷。我去网上下了2个JS特效，用在首页还冲突，更加郁闷。烦躁。

Answer 2

<script type='text/javascript'>
var gTagName='div'; //输入你导航元素的名称
var gClassName='nav'; //输入你导航类的名字
function menuClass()
{
var elements=document.getElementsByTagName(gTagName);
var i=elements.length;
for(var j=0;j<i;j++)
{
var element=elements[j];
var classname=element.className;
if(classname.indexOf(gClassName)!=-1)
{
menuFix(elements[j]);
}
}
}
function menuFix(a)
{
var sfEls = a.getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++)
{
sfEls[i].onmouseover=function() {this.className+=(this.className.length>0? " ": "") + "sfhover";}
sfEls[i].onMouseDown=function() {this.className+=(this.className.length>0? " ": "") + "sfhover";}
sfEls[i].onMouseUp=function() {this.className+=(this.className.length>0? " ": "") + "sfhover";}
sfEls[i].onmouseout=function() {this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");}
}
}
window.onload=menuClass;
</script>

Answer 3

嗯。