使用javascript切换div的显示CSS属性

Question

我的页面上有一个链接，可导致

<div id="po" style="display:none;">some html</div>

显示或隐藏。第一次单击隐藏/显示链接时，将显示 div。此后的任何时候，该链接都不会执行任何操作，我不明白为什么。我确实尝试相反地设置

<div style="display:block;">

并单击链接导致 div 隐藏。随后，div就不会显示了。我不明白为什么这不起作用。我在页面的其他地方有完全相同的东西，并且 div 会切换。

function po() {
  po = document.getElementById('po').style.display;
  
  if (po == "none") {
    document.getElementById('po').style.display = 'block';
    document.getElementById('po_Menu').src = "images/menu_dash.jpg";
  } else {
    document.getElementById('po').style.display = 'none';
    document.getElementById('po_Menu').src = "images/menu_plus.jpg";
  }
}

<img id="po_Menu" src="https://via.placeholder.com/50"> <a href="po()">show/hide</a>

Answer 1

你正在破坏这里的功能：

po = document.getElementById('po').style.display;

这会为

po

分配一个新值，因此以后对

po()

的调用将会失败，因为它不再是一个函数。

声明一个新变量：

const disp = document.getElementById('po').style.display;