Question

我一直在研究Show / Hide javascript并使用鼠标悬停效果进一步推动它以实现我想要的效果。为了更好的可访问性，我设置了一个小提琴。但是，我现在想要通过最多4个不同的文本区域来推动它（＆＃34;点击此处获取更多信息＆＃34;），每个文本区域都有更多的悬停文本，因为我试图在HTML代码本身中显示。我现在使用和编辑的javascript有＆＃34; ID＆＃34; s对应于＆＃34; 0＆＃34;和＆＃34; 1＆＃34;这不适用于我当前的HTML代码，因为它有像＃34; uu3308-10＆＃34; （用Adobe Muse制作）。 现在，我想知道我必须在Javascript中更改哪些变量才能使其正常运行并且有一种编译此代码的方法，因此它适用于至少11个其他＆＃34 ;点击此处获取更多信息＆＃34;点？

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

点击此处获取适当的信息 - ＆gt; 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";
        }
    }

}

显示/隐藏＆amp;鼠标悬停Javascript

1 个答案: