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添加各种click事件监听器并调用changeStyle函数。

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

编辑：好的，所以我并不疯狂。在发布这个问题之前，我已经尝试了几乎所有这些方法，但它们并没有奏效。这里还有别的东西。

例如，我尝试了Josh Beam的方法，然后得到：＆＃34;无法读取属性＆＃39; addEventListener＆＃39;未定义＆＃34;错误。

我甚至尝试用

包装它

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

它仍然无法正常工作。

Answer 1

适用于ul#report

中的任何H2元素

var main_ul = document.querySelector("#report");

main_ul.onclick = function(event){
  var elm = event.target;

  if(elm.tagName === "H2"){
    var pre = elm.nextElementSibling; // tada magic!
    changeStyle(pre);
  }
};

Answer 2

如果您想确保获得兄弟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元素。

Answer 3

您可以像这样使用getElementsByTagName：

var flag = 0
document.getElementsByTagName('h2')[0].onclick = function() {
  if (flag == 1) {
    document.getElementsByTagName('pre')[0].style.display = "none";
    flag = 0;
  } else {
    document.getElementsByTagName('pre')[0].style.display = "block";
    flag = 1;
  }
}

<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>

这也可以让您切换display。

Answer 4

你可以做这样的事情

var report = document.getElementById("report"); // <--- get the parent 
var h2 = report.getElementsByTagName('h2')[0];  // <--- search for h2 within parent
var pre = report.getElementsByTagName('pre')[0];// <--- search for pre within parent
h2.addEventListener('click', function(){        // <--- attach event to h2
  pre.style.display = pre.style.display === 'none' ? '' : 'none';  // <--- toggle display
});

var report = document.getElementById("report");
var h2 = report.getElementsByTagName('h2')[0];
var pre = report.getElementsByTagName('pre')[0];
h2.addEventListener('click', function() {
  pre.style.display = pre.style.display === 'none' ? '' : 'none';
});

<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>

单击标记以获取兄弟标记上的事件

4 个答案: