【问题标题】:Firefox, ie7, and ie6 are not working with this java scriptFirefox、ie7 和 ie6 无法使用此 java 脚本
【发布时间】:2013-09-06 04:50:07
【问题描述】:

使用下面的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);
             }
           }
         }

【问题讨论】:

  • 浏览器控制台(Firebug 等)中是否有任何错误?
  • 还有人支持IE6???
  • 有几个 css 错误,我不知道它们有多重要,还有一个来自 java 脚本本身的引用错误“未定义事件”。

标签: javascript css


【解决方案1】:

据我所知, tgt.style.display = "无"; //适用于 IE6,7,8,9,10,ff,CHORME 但, tgt.style.opacity = 0; //不兼容IE8。

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

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

【讨论】:

  • 从 java 脚本转换为 jQuery 会有多难或多费时?有没有针对这种情况的转换器?很好的建议,非常感谢。
  • 如果你将jQuery.js应用到,你可以在
  • 致meeming,非常感谢您的建议,我会尝试一下,因为您让我觉得它不会像我最初想象的那么难。 ???
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2011-08-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多