JavaScript切换div的display属性失效问题求助

问题描述 #

页面中有一个链接用于控制<div id="po" style="display:none;">some html</div>的显示隐藏，第一次点击正常，后续点击无反应；初始设为display:block时，第一次能隐藏但之后无法再次显示，其他同逻辑的div却正常。

核心问题 #

先看你的JavaScript代码：

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";
  }
}

这里的关键错误是函数名与变量名冲突：函数本身命名为po，第一次执行时，你用po = ...把这个函数覆盖成了字符串类型的display状态值，后续再点击调用po()时，实际是在调用一个字符串，自然没有任何反应。

另外HTML链接的写法也有问题：

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

href="po()"会触发页面跳转，导致函数执行逻辑被打断。

修复后的代码 #

JavaScript部分

修改变量名，避免和函数名重复，同时用let声明局部变量：

function po() {
  let displayState = document.getElementById('po').style.display;
  
  if (displayState == "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";
  }
}

HTML部分

调整链接的触发方式，阻止默认跳转行为：

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

或者更规范的写法：

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

优化建议 #

如果元素的显示隐藏是通过CSS类控制的，推荐用classList.toggle()来实现，逻辑更简洁且不易出错：

.hidden {
  display: none;
}

function po() {
  const poDiv = document.getElementById('po');
  poDiv.classList.toggle('hidden');
  
  const menuImg = document.getElementById('po_Menu');
  menuImg.src = poDiv.classList.contains('hidden') ? "images/menu_plus.jpg" : "images/menu_dash.jpg";
}

内容的提问来源于stack exchange，提问作者RCDAWebmaster