Question

我想我的问题需要更多解释。我想让我的下拉菜单在ipad上正常运行。我有顶级菜单项和子菜单项。当我点击顶层时，子菜单会下降，这是正确的。然后，当我从子菜单项中点击一个时，我的html页面加载到我的index.html（＃！affordable-holidays.html）中。问题是当html动态加载时，子级别下拉列表不会消失。因此，一旦我点击了父项，子菜单就永远存在。

我认为在动态加载的html顶部有一些javascript来隐藏ul会起作用。

我不确定页面加载的正确术语，因为这是一个购买的模板。举个例子，mysite.com就是索引，然后当我去另一个页面时，它是mysite.com＃！second-page.html

当页面加载时，如何在菜单中隐藏ul？这是我的HTML

<li><a href="#">Tester</a>
    <ul class="menu-hide">
       <li ><a href="#!pay-as-you-go.html"><span class="title">PAY AS YOU GO</span></a></li>
       <li ><a href="#!affordable-holidays.html"><span class="title">AFFORDABLE HOLIDAYS ALWAYS</span></a></li>
       <li ><a href="#!how-points-work.html"><span class="title">HOW POINTS WORK</span></a></li>
       <li ><a href="#!more-than-a-room.html"><span class="title">MORE THAN A ROOM</span></a></li>
    </ul>
</li>

我发现这是我想要的javascript：

<script type="text/javascript">$("div.menu-hide").hide()</script>

但我似乎无法定位ul.menu-hide。我试过这个

<script type="text/javascript">$("ul.menu-hide").hide()</script>

Answer 1

试试这个

<script type="text/javascript">
  $(window).load(function () {

   $("div.menu-hide").hide()
  })
</script>

你也可以使用

 $(window).ready(function () {

       $("div.menu-hide").hide()
      })

但区别在于，即使所有图形尚未加载，文档就绪事件在加载HTML文档并且DOM准备就绪时也已执行。

完整页面完全加载后，窗口加载事件会稍后执行，包括所有帧，对象和图像。

好读

$(document).ready vs. $(window).load

Answer 2

您似乎缺少文档。已经调用

<script type="text/javascript">$(document).ready(function(){$("ul.menu-hide").hide()});</script>

还要确保您的jQuery库链接在之前声明其他javascript

http://api.jquery.com/ready/

Answer 3

通过JavaScript隐藏页面加载时的HTML元素将导致元素在显示然后隐藏时产生闪烁效果。

我会用你的css文件隐藏元素，然后通过JavaScript显示。

css代码：

.menu-hide{ display: none; }

jQuery show code：

$(function(){
    $('.menu-hide').show();
});

在页面加载时隐藏ul

3 个答案: