我的代码有什么问题（dom+onclick+li+display）？答案

【问题标题】：Whats wrong with me code (dom+onclick+li+display)?我的代码有什么问题（dom+onclick+li+display）？
【发布时间】：2018-01-13 02:03:17
【问题描述】：

工作

tutorial.onclick = function(){      
    var tutorial = document.getElementById("tutorials-ul");    
    tutorial.style.display = "list-item";    
}

不工作

news.onclick = function(){    
var news = document.getElementById("news-ul");    

if(news.style.display == "none") {     
  news.style.display = "list-item";    
}

else if(news.style.display == "list-item") {    
   news.style.display = "none";
}    
}

接受任何答案或意见。

【问题讨论】：

好吧，这个问题并没有说明什么是错的......工作/不工作什么都没有告诉我们。
请说明您要达到的目标
浏览器控制台有错误吗？请分享。
请阅读How to Ask，以及如何创建minimal reproducible example。
我想做一个下拉菜单，里面有一个嵌套的 li，当你点击它来显示嵌套的 li 标签，然后如果你再次点击隐藏它。顺便说一下控制台没有错误

标签： javascript html css

【解决方案1】：

我假设外部 news 是一个已经分配给变量（或通过其 ID 分配给默认全局变量）的按钮。

问题是如果元素本身没有在其style 属性中设置display，那么它的初始值将是""，而不是CSS 中给出的任何值。

因此，与其比较 "none"，不如比较 ""。

news.onclick = function() {
  var news = document.getElementById("news-ul");
  if (news.style.display == "") {
    news.style.display = "list-item";
  } else {
    news.style.display = "";
  }
}

#news-ul {
  display: none
}

<button id=news>CLICK FOR NEWS</button>

<ul id="news-ul">
  <li>TEST
</ul>

【讨论】：

【解决方案2】：

我用这个堆栈溢出Get a CSS value with JavaScript弄明白了

显示和隐藏嵌套uls的正确代码是

news.onclick = function(){

var news = document.getElementById("news-ul");

函数 compareDisplayValue(){

var element = document.getElementById("news-ul");

var style = window.getComputedStyle(element);

var display = style.getPropertyValue('display');

if(display == "none"){

 news.style.display = "list-item";

}

else if (display == "list-item"){

 news.style.display = "none";

}

比较显示值（）；

}

【讨论】：