如何隐藏和显示一个div的点击与JavaScript的考虑，它不移动所有的内容时可见

z9smfwbn 于 2023-08-02 发布在 Java

关注(0)|答案(3)|浏览(79)

我使用以下JavaScript代码隐藏和显示div：

<script> 
    function myFunction() { 
      var x = document.getElementById("menudesplegable"); 
      if (x.style.display === "none") { 
        x.style.display = "block"; 
      } else { 
        x.style.display = "none"; 
      } 
    } 
    </script>

字符串
我面临的问题是，当元素不可见时，它不会占用任何空间，但当元素可见时，它会将所有其他内容向下移动。这是一个菜单切换，所以我需要所有其他内容都在同一位置，这个div显示在顶部。有可能吗？非常感谢！！！

JavaScript

来源：https://stackoverflow.com/questions/76798725/how-to-hide-and-show-a-div-on-click-with-javascript-with-the-consideration-that

3条答案

按热度按时间

uinbv5nw1#

从你的问题中我理解到的是。您希望meu内容覆盖而不是向下推内容。对于这个问题，你必须在设计中做出改变。使内容相对，并给予其z指数为1。这里是CSS代码片段给你。

<style>
  /* Styling for the menu button */
  #menuButton {
    position: relative;
    z-index: 1;
  }

  /* Styling for the menu */
  #menudesplegable {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f0f0f0;
    padding: 10px;
    z-index: 2;
  }
</style>

字符串
这里是div的内容，以便更好地理解。

<button id="menuButton" onclick="myFunction()">Toggle Menu</button>
<div id="menudesplegable">
  <!-- Your menu content goes here -->
</div>

型
最后你的功能！没关系不用换。

赞(0）回复(0）举报 2023-08-02

z5btuh9x2#

您也可以使用CSS动画，如下所示：

@keyframes messagebox-succeded-animation

字符串
{

0% {
    opacity: 1;
    display: block;
}

80% {opacity: 1;}

100% {
    opacity: 0;
    display: hidden;
}

型
}

赞(0）回复(0）举报 2023-08-02

oxcyiej73#

非常感谢！！！成功了：）你太棒了！

赞(0）回复(0）举报 2023-08-02

我来回答

如何隐藏和显示一个div的点击与JavaScript的考虑，它不移动所有的内容时可见

3条答案

相关问题

热门标签

最新问答