Javascript元素

我需要以下方面的帮助：

我有一个h3-s和段落的页面，我希望所有段落最初都隐藏起来

如果一个h3被点击，脚本将循环通过它下面的标签，显示段落标签，如果它到了另一个h3标签，它应该打破循环

我无法控制html输出，因此无法嵌套标记或提供任何h3-s ID。下面的代码是我必须使用的全部代码

例如，如果单击H3标题2，则显示标题2第1段和标题2第2段；如果再次单击H3标题2，则隐藏标题2第1段和标题2第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>

H3标题1
标题1第1款

标题1第2款

标题1第3款

标题1第4款

H3标题2
第2编第1款

第2编第2款

H3标题3
第3编第1款

第3编第2款

H3标题4
第4编第1款

第4编第2款

第4编第3款

无jQuery请查看以获取页面上的所有H3，您希望在这些H3上附加一个click（）处理程序

在onclick中，循环所有下一个元素，直到到达H3并打破循环。看看H3之后的元素

要显示/隐藏，请设置css类或直接更改元素的样式，在

display:block

和

display:none

之间切换，查看页面上的所有H3，您希望在这些H3上附加一个click（）处理程序

在onclick中，循环所有下一个元素，直到到达H3并打破循环。看看H3之后的元素

对于显示/隐藏，请设置css类或直接更改元素的样式，在

display:block

和

display:none

之间切换，类似

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();​

示例类似于

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();​

示例

我完全同意答案：获取对单击的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;
}

//我们将要使用的事件处理程序
var handler=function（）{
//`this`指的是单击的元素
var node=this.nextSibling；
//迭代以下所有节点
对于（；node；node=node.nextSibling）{
如果（node.nodeName=='P'）{
//如果是p元素，则切换可见性
node.style.display=node.style.display=='block'？'''block'；
}
else if（node.nodeName=='H3'）{//或node.nodeType==1
break；//如果是H3元素（或元素但不是P），则停止
}
}
};
//获取所有h3元素
var h3s=document.getElementsByTagName（'h3'）；
//将单击事件处理程序分配给所有单击事件处理程序
对于（变量i=0，l=h3s.length；i

绑定事件处理程序的方法有很多种，所有这些都在下面的部分中进行了详细说明

引用：，

我完全同意答案：获取对单击的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;
}

//我们将要使用的事件处理程序
var handler=function（）{
//`this`指的是单击的元素
var node=this.nextSibling；
//迭代以下所有节点
对于（；node；node=node.nextSibling）{
如果（node.nodeName=='P'）{
//如果是p元素，则切换可见性
node.style.display=node.style.display=='block'？'''block'；
}
else if（node.nodeName=='H3'）{//或node.nodeType==1
break；//如果是H3元素（或元素但不是P），则停止
}
}
};
//获取所有h3元素
var h3s=document.getElementsByTagName（'h3'）；
//将单击事件处理程序分配给所有单击事件处理程序
对于（变量i=0，l=h3s.length；i

绑定事件处理程序的方法有很多种，所有这些都在下面的部分中进行了详细说明

---

参考：，

因此您无法修复损坏的标记，也无法使用合适的库进行DOM操作。真遗憾。这两个选项中的任何一个都会使问题更容易回答。您是想自己动手还是只想让我们编写代码？我已经完成了“代码”窗口。onload=function（）{paragraphtags（）；}function paragraphtags（）{var container=document.getElementById（“bodytag”）；if（container！=null）{var h3=container.getElementsByTagName（'h3'）；用于（i=0；iSo您无法修复损坏的标记，也无法使用像样的库进行DOM操作。这太遗憾了。这两个选项中的任何一个都会使这一问题更容易回答。您是想自己解决还是只想让我们编写您的代码？我已经完成了“代码”窗口。onload=function（）{paragraphtags（）；}函数paragraphtags（）{var container=document.getElementById（“bodytag”）；if（container！=null）{var h3=container.getElementsByTagName（'h3'）；用于（i=0；i注意到

nextElementSibling

在v9之前的Internet Explorer中不起作用。@xqwzts非常感谢您，我设法使它起作用。var sib=this.nextElementSibling；而（sib.nodeName！=“H3”）{sib.style.display=“block”；sib=sib.nextElementSibling；}请注意，

nextElementSibling

在v9之前的Internet Explorer中不起作用。@xqwzts非常感谢您，我设法使它起作用。var sib=this.nextElementSibling；而（sib.nodeName！=“H3”）{sib.style.display=“block”；sib=sib.nextElementSibling；}+1以获得正确的代码（如果阅读起来有点困难！）。我已经将您的

stlye

打字错误更正为

style

@lonesomeday，谢谢，但直到我在那之后编辑时才更正，因为