0

次のことについて助けが必要です。

h3-s と段落を含むページがあり、最初はすべての段落を非表示にしたいと考えています。

h3 をクリックすると、スクリプトはその下のタグをループし、段落タグを表示します。別の h3 タグに到達すると、ループを抜け出します。

HTML出力を制御できないため、タグをネストしたり、h3-s IDを指定したりすることはできません。以下のコードは、私が遊ぶ必要があるすべてです。

たとえば、H3 Title2 をクリックすると、Title 2 Para 1 と Title 2 Para 2 が表示され、H3 Title2 をもう一度クリックすると、Title 2 Para 1 と Title 2 Para 2 が非表示になります。

<h3>H3 Title1</h3>
<p>Title 1 Para 1</p>
<p>Title 1 Para 2</p>
<p>Title 1 Para 3</p>
<p>Title 1 Para 4</p>


<h3>H3 Title2</h3>
<p>Title 2 Para 1</p>
<p>Title 2 Para 2</p>


<h3>H3 Title3</h3>
<p>Title 3 Para 1</p>
<p>Title 3 Para 2</p>


<h3>H3 Title4</h3>
<p>Title 4 Para 1</p>
<p>Title 4 Para 2</p>
<p>Title 4 Para 3</p>

jQueryなしでお願いします

4

3 に答える 3

2

getElementsByTagNameを見て、ページ上のすべての H3 を取得します。それらに click() ハンドラーをアタッチします。

onclick では、H3 に到達してループから抜け出すまで、次のすべての要素をループします。H3 の後の要素を取得するには、nextElementSiblingを参照してください。

表示/非表示を切り替えるには、css クラスを設定するか、要素のスタイルを と の間display:blockで切り替えて直接変更しdisplay:noneます。

于 2012-08-24T11:04:45.017 に答える
1

何かのようなもの..

var pHide = function () {
    var ps = document.getElementsByTagName('p'), i = ps.length;
    while(i-->0) ps[i].style.display = 'none';
},
toggleDisplay = function (elm) {
    elm.style.display = elm.style.display === 'none' ? 'block' : 'none';
},
nextNode = function (elm) { // can't assume built in?
    var e = elm;
    while( e = e.nextSibling ) if ( e.tagName !== undefined ) break;
    return e;
},
addActions = function () {
    var hs = document.getElementsByTagName('h3'), i = hs.length;
    while(i-->0) hs[i].addEventListener('click',function () {
        var elm = this;
        while( (elm = nextNode(elm)) && elm.tagName.toLowerCase() != 'h3') if(elm.tagName.toLowerCase() == 'p') toggleDisplay(elm);
    }, false);

};
pHide();
addActions();​

フィドルの例

于 2012-08-24T11:07:15.903 に答える
0

xqwzts の回答に完全に同意します。クリックされた H3 要素への参照を取得し、次のノードを反復処理してそれらを検査します (タイプと名前)。

別の、おそらく読みやすい解決策を次に示します。

// the event handler we are going to use
var handler = function() {
    // `this` refers to the clicked element
    var node = this.nextSibling;
    // iterate over all following nodes
    for(; node ; node = node.nextSibling) {
        if(node.nodeName === 'P') {
            // if it is a p element, toggle the visibility
            node.style.display = node.style.display === 'block' ? '' : 'block';
        }
        else if(node.nodeName === 'H3') { // or node.nodeType === 1
            break; // if it is a H3 element (or an element but not P), stop
        }
    }
};

// get all h3 elements
var h3s = document.getElementsByTagName('h3');

// assign a click event handler to all of them
for(var i = 0, l = h3s.length; i < l; i++) {
    h3s[i].onclick = handler;
}

デモ

イベント ハンドラーをバインドするにはさまざまな方法があり、そのすべてがquirksmode.orgで詳しく説明されています。

参考： getElementsByTagName、Node#nodeName、Node#nodeType、Element#style

于 2012-08-24T12:26:07.027 に答える