显示/隐藏＆鼠标悬停Javascript

Question

我一直在研究显示/隐藏javascript，并用鼠标悬停效果进一步推动，以实现我想要的效果。为了更好的可访问性，我设置了一个小提琴。但是，现在我想通过最多4个不同的文本区域来推送它（“点击此处获取更多信息”），并且每个文本区域都会有更多悬停文本，因为我试图在HTML代码本身中显示。我现在使用和编辑的JavaScript具有对应于“0”和“1”的“ID”，它不适用于我当前的HTML代码，因为它具有诸如“uu3308-10”（用Adobe Muse制作）等时髦名称。 现在，我想知道我需要在Javascript中更改哪些变量才能使其功能正常并且有没有办法编译此代码，以便至少可以与另外11个“单击此处以获取更多信息”点一起使用？

注意：当前的javascript使showMoreText2出现在两个showMoreText区域下面（希望一次只显示一个悬停文本）。

点击这里FIDDLE - >http://jsfiddle.net/TPLOR/vy6nS/

谢谢，我希望这是足够的帮助。 =）

Answer 1

有点hackish的：（见http://jsfiddle.net/vy6nS/30/）

window.onload = function() { 
    var elems1 = document.getElementsByClassName("expander"); 
    for (i = 0; i < elems1.length; i++) { 
     elems2 = elems1[i].childNodes; 
     for (x = 0; x < elems2.length; x++) { 
      if (elems2[x].className == "toggle") elems2[x].onclick = function() { 
       showMore(0, this); 
      }; 
      else if (elems2[x].className == "showMoreText") { 
       elems2[x].onmouseover = function() { 
        showChilds("block", this); 
       }; 
       elems2[x].onmouseout = function() { 
        showChilds("none", this); 
       }; 
      } 
     } 
    } 
}; 

function get_nextsibling(n) { 
    x = n.nextSibling; 
    while (x.nodeType != 1) { 
     x = x.nextSibling; 
    } 
    return x; 
} 

function showChilds(disp, elem) { 
    get_nextsibling(elem).style.display = disp; 
} 

function showMore(disp, elem) { 
    var children = elem.parentNode.childNodes; 
    for (i = 0; i < children.length; i++) { 
     if (disp == 0 && children[i].className == "showMoreText") { 
      children[i].style.display = children[i].style.display == "none" ? "block" : "none"; 
     } 
    } 

}​