页面加载时隐藏ul

Question

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

我认为在动态加载的html的顶部使用一些javascript来隐藏ul是可行的。

我不确定页面加载的正确术语，因为这是一个购买的模板。例如，mysite.com将是索引，然后当我转到另一个页面时，它就是mysite.com#！第二页.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">$(document).ready(function(){$("ul.menu-hide").hide()});</script>

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

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

Answer 2

尝试这个

<script type="text/javascript">
$(window).load(function () {
$("div.menu-hide").hide()
})
</script>

你也可以使用

$(window).ready(function () {
$("div.menu-hide").hide()
})

但不同的是，当HTML文档加载并且DOM准备就绪时，文档就绪事件已经执行，即使所有图形还没有加载。

窗口加载事件在整个页面(包括所有帧、对象和图像)完全加载后执行。

良好阅读

$(文档).准备好与$(窗口).加载

Answer 3

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

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

css代码：

.menu-hide{ display: none; }

jQuery显示代码：

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