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 并跳出循环。查看nextElementSibling获取 H3 之后的元素。

display:block为了显示/隐藏，要么设置一个 css 类，要么直接更改元素的样式，在和之间切换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 回答