0

使用下面的 java 脚本,firefox、ie7 和 ie6 无法正常工作(ie8 在应用 getElementsByClassName.polyfill.js 后工作。)任何人都可以在下面的脚本中发现 firefox、ie7 和 ie6 工作的任何问题吗?(在应用 polyfill.js 之前,Chrome 和 safari 运行良好。)

这个java脚本旨在通过单击打开和关闭几个级别的类别。

/*------------------------------------------
Open or close the specified node.
------------------------------------------*/
function openOrClose(tgt){

//To make the list visible when the specified node is hidden.
if(tgt.style.visibility == "hidden"){
    tgt.style.display = "block";
    tgt.style.visibility = "visible";

    tgt.style.height = "auto";
    tgt.style.paddingTop = "0.25em";
    tgt.style.lineHeight = "1em";
    tgt.style.opacity = 1.0;

}
//To make the list hide when the specified node is not hidden.
else{
    tgt.style.display = "none";

    tgt.style.visibility = "hidden";
    tgt.style.height = "0px";
    tgt.style.paddingTop = "0";
    tgt.style.lineHeight = 0;

    tgt.style.opacity = 0;
   }
   }

   /*------------------------------------------
   To open the list
   ------------------------------------------*/
   function listopen(lv, num){
   var tgt = document.getElementsByClassName("level" + lv)[num];

    //To search the next level -> to open the next level list.
   for(var i=0; i < document.getElementsByClassName("level" + (lv+1)).length; i++){
    var next_tgt = document.getElementsByClassName("level" + (lv+1))[i];
    //li

    if (next_tgt.parentNode == tgt || next_tgt.parentNode.parentNode == tgt){
        openOrClose(next_tgt);
    }
    }
    //To search the next level -> change the shape of the button that is displayed.
    for(var i=0; i < tgt.childNodes.length; i++){
    var next_tgt = tgt.childNodes[i];
    //ul
    if(next_tgt.tagName == "UL"){
        if(next_tgt.style.height == "0px"){
            if(event.srcElement.parentNode.className == "category_header plus"){
                event.srcElement.innerText = '?';
                event.srcElement.parentNode.className = "category_header minus";
            }
            next_tgt.style.height = "auto";
        }
        else{
            for(var i=0; i<next_tgt.parentNode.childNodes.length; i++){
                if(event.srcElement.parentNode.className == "category_header minus"){
                    event.srcElement.innerText = '+';
                    event.srcElement.parentNode.className = "category_header plus";
                }
            }
            next_tgt.style.height = "0px";
        }
        }
        }
       }

     /*------------------------------------------
     To set up the click event
     ------------------------------------------*/
      function setclickevent(tgt, lv, num){
       //To make invisible when the level is other than 1.
      if(lv!=1){
    tgt.style.visibility = "hidden";
    tgt.style.display = "none";
    tgt.style.height = "0px";
    tgt.style.lineHeight = 0;
    tgt.style.paddingTop = 0;
    tgt.style.paddingBottom = 0;
    if(tgt.parentNode.tagName == "UL"){
        tgt.parentNode.style.height = "0px";
        tgt.parentNode.style.margin = "0";
        tgt.parentNode.style.padding = "0";
        tgt.parentNode.style.border = "none";
        }
        }
        var hasLink_flg;
         if(tgt.childNodes.length){
    for (var j = 0; j < tgt.childNodes.length; j++) {
        //To enlarge the scope where you can click.
        if(tgt.childNodes[j].tagName == 'A'){
            tgt.setAttribute('onclick', 'location.href="' +  
     tgt.childNodes[j].getAttribute('href') + '"');
        }
        //To add the event function of the accordion list
        else if(tgt.childNodes[j].tagName == 'UL'){
            //To display ? and add the list open function.
            var linkObj = document.createElement("a");
            linkObj.innerText = '+';
            tgt.childNodes[0].className="category_header plus";
            tgt.childNodes[0].appendChild(linkObj);
            j++;
            linkObj.parentNode.setAttribute('onclick', 'listopen(' + lv + ',' + num + ')');

            //tgt.setAttribute('onclick', 'listopen(' + lv + ',' + num + ')');
            break;
          }
         }
         }
        }

       /*------------------------------------------
       Initialization 
        ------------------------------------------*/
      // To search all the node that has level? class and initiali
      function initCategoryList(){
      var lv = 0;
        //To add the click event to all the node that has level?
         while(document.getElementsByClassName("level" + (++lv)).length){
        for (var i = 0; i < document.getElementsByClassName("level" + lv).length; i++) {
        setclickevent(document.getElementsByClassName("level" + lv)[i], lv, i);
             }
           }
         }
4

1 回答 1

0

据我所知, tgt.style.display = "none"; // IE6,7,8,9,10,ff,CHORME 没问题 但是,tgt.style.opacity = 0; //不兼容IE8。

我建议你应用jQuery并编写jQuery语句以避免浏览器差异。

比如:$(tgt).hide 或:$(tgt).css({ display: "none", height: "0px" });

于 2013-09-03T05:01:01.773 回答