javascript - 单击标签以获取同级标签上的事件

Question

我有以下 html

<ul id="report">
  <li class="suite">
    <h1>Level 2</h1>
    <ul>
      <li class="test pass fast">
        <h2>it first</h2>
        <pre style="display: none;">
          <code>('hello').should.be.a('string');</code>
        </pre>
      </li>
    </ul>
  </li>
</ul>

当点击上面的 h2 标签时，我想将预样式从 display:block 更改为 display:none 。但是，我一生都无法弄清楚如何做到这一点。我知道我需要做一些事情:

function changeStyle() {
    pre.style.display = 'none' == pre.style.display
    ? 'block'
    : 'none';
}

但我不知道如何将它附加到 h2。我试过:

var h2 = getElementsByTagName('h2');
var pre = h2.getElementById('pre');

但是这是不对的，因为 pre 不是 h2 的子元素。我不知道该怎么办。我尝试向h2添加各种点击事件监听器并调用changeStyle函数。

注意:我真的不想使用 jQuery。

编辑:好吧，所以我没疯。在发布这个问题之前，我已经尝试了几乎所有这些方法，但它们都不起作用。这里一定发生了其他事情。

例如，我尝试了 Josh Beam 的方法，但得到:“无法读取未定义的属性‘addEventListener’”错误。

我什至尝试用它包裹它

document.onLoad = function () {
//code
}

但还是不行。

Answer 1

如果您想确保获得同级 pre 元素，只需执行以下操作(请参阅 jsfiddle ):

document.getElementsByTagName('h2')[0].addEventListener('click', function(e) {
    var pre = e.target.nextElementSibling;

    pre.style.display = pre.style.display === 'block' ? 'none' : 'block';
});

这将确保您没有选择页面上可能存在的任何其他 pre 元素。