Question

我的常见问题解答页面上有各种各样的问题，比如

<h3><a href="#" onclick="this.parent.nextSibbling.style=toggle_display()">How to signup?</a></h3>
<div class="info" style="display:none">
    This is the hidden answer
</div>

答案是隐藏的，当用户点击链接时，会显示下面的div。虽然我可以轻松地使用jquery这样做，但我不想让页面变重所以我只是使用以下内容功能

function toggle_display()
    {   

         var answers=document.getElementsByClassName("info");
         for(var i=0;i<answers.length;i++)
         {  
             //hide all the divs first
             answers[i].style.display='none';
        }
           //return block as style so that the caller's div answer can be set to block
        return 'block';
}

但是我在访问链接的下一个唠叨div时遇到问题。我应该在下一行中替换

<a href="#" onclick="**this.parent.nextSibbling**.style=toggle_display()">

Answer 1

如果你想获得父节点的下一个兄弟节点，那么你的代码应该是这样的。

this.parentNode.nextSibling

Answer 2

要忽略文本dom节点并使用正确的一个元素：

this.parentElement.nextElementSibling.style = ......

如何在javascript中访问父级的兄弟节点？

2 个答案: