我遇到了div显示和隐藏的问题，在ff,ie7,myie,safari下都能正常工作，唯独ie6不正常。
问题描述：
用div定义了一个导航树，需要显示或者隐藏这个树，具体做法就是设置div的css。
jsp(html)：abc.jsp
......
<span widget="StateView">
<div id="sidebar-pane"
>
<div class="header-text">Project files</div>
<span id="project-tree-view" widget="ProjectTreeView"></span>
</div>
<div id="sidebar-hider" onclick-class="sb-hidden"
><img src="../images/white-left-triangle.gif" style="position: absolute; left: 2px; bottom: 50%;">
</div>
<div id="sidebar-shower" onclick-class="">
<img src="../images/white-right-triangle.gif" style="position: absolute; left: 2px; bottom: 50%;">
</div>
<span id="main-pane" widget="StateView"
></span>
......
</span>
js:StateView.js
_package_('StateView', [['class','../js/class.js'],['Widget','../js/Widget.js']], function () {
StateView = _class_(Widget, {
_new_: function (element) {
Widget.call(this, element);
setupHandlers.call(this, element);
},
......
setStateClass: function (className) {
if (className.charAt(0) == '~') {
className = className.substr(1);
} else {
className = ' ' + className;
}
var childNodes = this.element.childNodes;
// var ie6 = getIEVersion() == 6 ? true:false;
for (var i = 0; i < childNodes.length; i++) {
if(childNodes[i].tagName){//could be a blank, IE6 can't handle it
childNodes[i].className = childNodes[i].defaultClassName + className;
}
return false;
}
});
function setupHandlers(element) {
for (var i = 0; i < element.childNodes.length; i++) {
var childNode = element.childNodes[i];
if(!childNode.tagName) continue;//could be a blank, IE6 can't handle it
childNode.defaultClassName = childNode.className;
if (childNode.nodeType == 1) {
var att = childNode.attributes["onclick-class"];
if (att) {
var className = att.nodeValue;
// <div onclick-class="~something"> means that "something" should be directly
// appended to class names when the mode is entered, rather than adding an
// additional class name to the list of classes held by elements.
childNode.onclick = lazyApply(bind(this, this.setStateClass), [className]);
} else if (childNode.getAttribute('widget')==null) {
try {
setupHandlers.call(this, childNode);
} catch(e) { }
}
......
css:
......
/* sidebar-hider */
#sidebar-hider, #sidebar-shower {
position: absolute;
top: 0px;
bottom: 0;
width: 10px;
background: #bccade;
cursor: pointer;
height:100%;
}
#sidebar-hider:hover, #sidebar-shower:hover {
background: #ccdaee;
}
#sidebar-hider {
left: 200px;
}
#sidebar-hider.sb-hidden {
display: none;
}
#sidebar-shower {
display: none;
left: 0;
}
#sidebar-shower.sb-hidden {
display: block;
}
#sidebar-pane.sb-hidden {
display: none;
}
#main-pane.sb-hidden {
left: 10px;
}
只贴了核心的js代码，将widget标签对应有一个同名的js文件，定义了一个这样的class，如StateView，对应的StateView.js，在abc.jsp中会自动的去new StateView 对象，主要是通过setupHandlers(element)方法去改变对应html tag的css来达到效果，但是红色标记的那段代码，在ie6下某些效果就不是理想的情况。
比如abd.jsp中红色标记的部分即为显示和隐藏导航树的tags，但是ie6下上述js无法有效的change some of the styles，只有第一个div能凑效（id=sidebar-pane
）
请大家发表意见。
thank u.
(不知道这些信息是否够,如还需补充，请跟帖，谢谢)
