javascript - 在javascript中更改兄弟元素的样式

Question

有什么想法，为什么在单击此处的第一个 div 后，同一级别的下一个元素(同级？)没有按照下面在 javascript 中的指示更改其样式？ display: none 应该在点击第一个元素后在 style 处消失。提前致谢

<div id="y" style="width: 75%; left: 146px; onclick=" function1() "; ">
  par1
</div>
<ul id="x" style="width: 75%; left: 146px; display: none;">
  par2
</ul>

<script type="text/javascript">
  function function1() {
    event.srcElement.nextElementSibling.style.display = "";
  }
</script>

Answer 1

首先，您漏掉了一个双引号，因此 onclick 属性没有被正确解释。其次，一旦问题解决，您应该将 display 设置为 block，而不是空字符串，以使元素可见。试试这个:

<div id="y" style="width: 75%; left: 146px;" onclick="function1()">
  par1
</div>
<ul id="x" style="width: 75%; left: 146px; display: none;">
  par2
</ul>

<script type="text/javascript">
  function function1() {
    console.log(event);
    event.srcElement.nextElementSibling.style.display = "block";
  }
</script>