IE6下边div隐藏和显示时页面重画的问题

我遇到了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.

(不知道这些信息是否够,如还需补充,请跟帖,谢谢)

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值