DOM+onclick+li+display代码问题求助：教程代码正常，新闻代码失效

让我帮你拆解下新闻点击切换代码失效的原因，主要有两个常见的细节问题：

1. 变量名冲突（潜在隐患） #

你在点击事件的回调函数里声明了var news = document.getElementById("news-ul");，但外部用来绑定点击事件的元素也叫news（比如可能是触发点击的按钮/标题）。虽然这个不一定直接导致失效，但会造成变量作用域的混淆，建议把内部变量名改得更清晰，比如newsList，避免歧义。

2. style.display的读取局限性（核心问题） #

这是导致代码失效的关键原因：element.style.display只能读取元素的inline样式（也就是直接写在元素style属性里的样式）。如果你的news-ul初始显示状态是通过外部CSS、内部样式表设置的（比如默认display: none或者list-item），那初始状态下news.style.display会是空字符串，根本触发不了你的if/else判断。

而教程的代码能正常工作，是因为它不需要判断状态，直接强制设置display: list-item，所以不管初始状态是什么都能生效。

针对核心问题的两种解决方法： #

方法一：用getComputedStyle获取实际生效的样式

这个方法可以获取元素最终的计算样式，不管样式是写在inline还是CSS里：

// 先修正变量名避免冲突
news.onclick = function(){ 
  var newsList = document.getElementById("news-ul"); 
  // 获取元素的实际计算样式
  var currentDisplay = window.getComputedStyle(newsList).display;
  if(currentDisplay === "none") { 
    newsList.style.display = "list-item"; 
  } else { 
    newsList.style.display = "none"; 
  } 
}

方法二：用CSS类切换（更推荐，符合最佳实践）

把显示隐藏的逻辑交给CSS，JS只负责切换类，这样代码更简洁，也避免样式判断的坑：
首先在CSS里定义隐藏类：

.hidden {
  display: none;
}

然后给news-ul初始加上这个类（如果默认要隐藏的话）：

<ul id="news-ul" class="hidden">...</ul>

最后JS代码简化成：

news.onclick = function(){ 
  var newsList = document.getElementById("news-ul"); 
  // 直接切换hidden类
  newsList.classList.toggle("hidden");
}

这种方式不仅代码更短，还能把样式逻辑和JS逻辑分离，后续维护也更方便。

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