Question

我使用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; }

Answer 1

而不是style.overflow，只需使用style.display。此外，必须在==条件中使用if进行比较，而不是=。

使用style.display = "none";代替style.overflow = "hidden";

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

overflow＆amp;之间的差异display

<强>溢出

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


visible 溢出不会被剪裁。它呈现在元素框之外。这是默认值。

hidden 剪辑溢出，其他内容将不可见。


<强>显示


block 将元素显示为块元素。

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

有关详细信息，请参阅Mozilla/display＆amp; Mozilla/overflow

修改 - 您以错误的方式使用if...else。请参阅Mozilla/if...else

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

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

希望这有帮助！

Answer 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>

首先显示列表然后隐藏它

2 个答案: