今天在做菜单的时候遇到菜单显示关闭的问题,开发时候是用firefox,级联菜单在firefox中加载后,通过改变ul中style中的display属性来控制菜单的收缩
if($ul.attr("style")=="display: none;"){
// alert("关闭状态--打开");
$("#"+id).find("div").eq(grade-1).attr("class","collapsable");
$("#"+id).find("div").eq(grade).attr("class","folder_collapsable");
$ul.attr("style","display: block;");
}
else{
$("#"+id).find("div").eq(grade-1).attr("class","first_expandable");
$("#"+id).find("div").eq(grade).attr("class","folder_expandable");
// alert("开启状态--关闭");
$ul.attr("style","display: none;");
}
这样写在firefox和Chrome中运行没有问题,换做IE上运行菜单栏能打开,能关闭,但是在第一次加载打开后,关闭后无法打开,调试过程中总是弹出“开启状态--关闭”,这说明if中的条件判断一直是false,执行else中语句。
问题找到了,然后在else中打印$ul.attr("style")的值测试,在firefox中是"display: none;",所以运行正常;但是在IE中是"display: none",少了个分号,所以匹配不上,一直执行else中语句。这也就是不同浏览器之间IE内核不同,对javascript语法也有些差异,在if添加判断一下IE中的情况,问题就可以解决了
if($ul.attr("style")=="display: none;"||$ul.attr("style")=="display: none"){
// alert("关闭状态--打开");
$("#"+id).find("div").eq(grade-1).attr("class","collapsable");
$("#"+id).find("div").eq(grade).attr("class","folder_collapsable");
$ul.attr("style","display: block;");
}
else{
// alert($ul.attr("style"));
//
// alert("开启状态--关闭");
$("#"+id).find("div").eq(grade-1).attr("class","first_expandable");
$("#"+id).find("div").eq(grade).attr("class","folder_expandable");
$ul.attr("style","display: none;");
}