1

私は Show/Hide javascript を研究しており、マウスオーバー効果でそれをさらに押して、私が望むものを達成しました。アクセシビリティを向上させるために Fiddle をセットアップしました。ただし、最大 4 つの異なるテキスト領域 (「詳細についてはここをクリック」) を使用してプッシュしたいと考えており、HTML コード自体に表示しようとしたため、各テキスト領域にはさらに多くのホバー テキストが表示されます。私が使用して編集した JavaScript には、「uu3308-10」(Adobe Muse で作成) のような変な名前が付いているため、現在の HTML コードでは機能しない「0」と「1」に対応する「ID」があります。さて、Javascript を適切に機能させるには、どの変数を変更する必要があるのでしょうか。このコードをコンパイルして、少なくとも 11 個の他の「詳細については、ここをクリックしてください」で動作するようにする方法はありますか?

注: 現在の JavaScript では、showMoreText2 が両方の showMoreText 領域の下に表示されます (一度に 1 つのホバー テキストのみが表示されるようにする必要があります)。

フィドルについてはここをクリック -- > http://jsfiddle.net/TPLOR/vy6nS/

ありがとう、これが十分に役に立ったことを願っています。=)

4

1 に答える 1

1

ちょっとハック：（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";
        }
    }

}​
于 2012-07-12T18:08:08.920 に答える