首先显示列表然后隐藏它[关闭]答案

【问题标题】：Firstly show list then hide it [closed]首先显示列表然后隐藏它[关闭]
【发布时间】：2015-12-04 23:06:49
【问题描述】：

我使用 css 和 JS 编写代码，首先显示列表然后隐藏它。但是我不能这样做有人可以帮助我改进它吗？

HTML

<ul id="myDIV"> 
  <img src="Messenger/AWTzuJu8q-E.png" onclick="myFunction()">
  <li>arman</li> 
  <li>arman</li> 
  <li>arman</li> 
  <li>arman</li> 
</ul>

Javascript

    function myFunction() {
      if (document.getElementById("myDIV").style.overflow = "hidden") {
        document.getElementById("myDIV").style.overflow = "visible"
      } else if(document.getElementById("myDIV").style.overflow = "visible") {
        document.getElementById("myDIV").style.overflow = "hidden"
      }
    }

CSS

#myDIV {width: 41px;height: 28px;overflow: hidden; }

【问题讨论】：

我不会对你投反对票，因为你是 Stack Overflow 上的新手。但请阅读“如何提问”指南。
Offtopic：别再对新成员这么刻薄了，去给别人一些爱和点赞吧:)
@Artur 希望我的回答对您有所帮助。不要担心否决票，欢迎来到 StackOverflow！编码愉快！
所以..你想先显示..然后在几秒钟后隐藏帖子/内容？喜欢.. 5 秒后隐藏...
你能详细说明你的代码是如何不工作的吗？你期待什么，实际发生了什么？如果您遇到异常，请发布发生异常的行和异常详细信息。

标签： javascript html css

【解决方案1】：

不要使用style.overflow，而是使用style.display。另外，== 必须在if 条件中用于比较，而不是=。

使用style.display = "none"; 而不是style.overflow = "hidden";

使用style.display = "block"; 代替style.overflow = "visible";

overflow 和 display 之间的区别

溢出

overflow 属性指定内容溢出时会发生什么元素的盒子。

visible 溢出没有被剪裁。它呈现在元素的框外。这是默认值。

hidden 溢出被剪掉，其余内容将不可见。

显示

block 将元素显示为块元素。

none 元素根本不会显示（对布局没有影响）。

更多信息，请参考Mozilla/display & Mozilla/overflow

编辑 - 您以错误的方式使用 if...else。请参考Mozilla/if...else

在您的情况下，您的功能将是这样的（请阅读我的 cmets）。

function myFunction() {
  if (document.getElementById("myDIV").style.display == "none") {  // If hidden, set display to block to show list
    document.getElementById("myDIV").style.display = "block";
  } else {  // If visible, set display to none to hide list
    document.getElementById("myDIV").style.display = "none";
  }
}

希望这会有所帮助！

【讨论】：

我试过这样但它不起作用，我明白了吗？函数 myFunction() { if(document.getElementById("myDIV").style.display = "none") {document.getElementById("myDIV").style.display = "visible"} } else(document.getElementById(" myDIV").style.display = "visible") {document.getElementById("myDIV").style.display = "hidden"}
在if 语句中使用== 进行比较，而不仅仅是=。对于display 属性，请使用block 而不是visible 和none 而不是hidden。
@ArturGevorgian 请检查上面更新的function 并阅读 cmets 以获得更好的理解。

【解决方案2】：

我不明白你想要实现什么，如果你只是想在点击时隐藏它然后试试这个

<!DOCTYPE html>
<html>
<body>

<ul id="myDIV" onclick="myFunction()"> 
  <li>arman</li> 
  <li>arman</li> 
  <li>arman</li> 
  <li>arman</li> 
</ul>

<script>
function myFunction() {

 if(document.getElementById("myDIV").style.display= "none"){

    document.getElementById("myDIV").style.display= "visible"
}
else if(document.getElementById("myDIV").style.diaplay= "visible"){

  document.getElementById("myDIV").style.display= "none"
}}
</script>

</body>
</html>

【讨论】：