Question

我有一个php渲染菜单。此菜单是呈现页面时显示的第一项。问题在于菜单的属性就像一个简单的文本列表一样，就像一个残破的页面，因此，在页面完全渲染之后，菜单就会按原样显示。

我已经尝试过使用fadingin，delay和no对我有用。就我而言，如何仅在页面完全加载后才能显示此菜单？ 我正在使用原型和jQuery。如何做到无冲突？

html的结构很简单：

   <div id="menu">
      <nav id="mobile-menu" >
          <ul>
              <li>item</li>
              <li>item</li>
          </ul>
       </nav>
    </div>

页面渲染前的菜单：

Answer 1

如果您尝试过淡入淡出，我认为您已经对此有所了解。

#menu {
  display: none;
}

过去，我在jQuery实现方面遇到了一些问题，只使用了纯Javascript。您可以将其放在HTML页面的底部吗？

这是一种hack，但是要取决于您的用例。

<script>
document.getElementById("menu").style.display = "block";
</script>

Answer 2

    <html>
    <head>
        <script type="text/javascript" 
        src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'> 
        </script>
    <style>
        #menu{
            display: none;
        }
    </style>
</head>
<body>
<div id="menu">
      <nav id="mobile-menu" >
          <ul>
              <li>item</li>
              <li>item</li>
          </ul>
       </nav>
    </div>
</body>
 <script>
  $(document).ready(function(){
    $('#menu').css("display", "block");
  })
  </script>
</html>

Answer 3

如果您正在使用jquery，则需要在下面显示菜单。修改HTML后会触发$（document）.ready

$( document ).ready(function() {
//change menu style to display
});

Answer 4

谢谢你们！我使用您的代码时没有冲突！

<script type="text/javascript">
   var j = jQuery.noConflict();
   j( document ).ready(function( $ ) {
        j('.hide-menu').css("display", "block");
    });    
 </script>

仅在页面完全渲染后如何显示div

4 个答案: