javascript 在页面加载时隐藏 ul
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12582012/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
hide ul on page load
提问by user1681447
I guess my problem needs more explanation. I am trying to get my drop down menu to function correctly on the ipad. I have top level menu items and sub menu items. When I tap the top level, the sub menu drops down, which is correct. Then when I tap one off the sub menu items, my html page loads inside my index.html (#!affordable-holidays.html). The problem is that the sub level drop down does not disappear when the html loads dynamically. So once I have tapped a parent item, the sub menu is there forever.
我想我的问题需要更多解释。我试图让我的下拉菜单在 ipad 上正常运行。我有顶级菜单项和子菜单项。当我点击顶层时，子菜单会下拉，这是正确的。然后，当我从子菜单项中点击一个时，我的 html 页面会加载到我的 index.html (#!affordable-holidays.html) 中。问题是当 html 动态加载时，子级下拉不会消失。所以一旦我点击了一个父项，子菜单就会永远存在。
I thought that having some javascript at the top of the dynamically loaded html to hide the ul would work.
我认为在动态加载的 html 顶部有一些 javascript 来隐藏 ul 会起作用。
I am not sure of the correct terminology of how the page loads as this was a purchased template. For an example, mysite.com would be the index, and then when I go to another page it is mysite.com#!second-page.html
我不确定页面加载方式的正确术语，因为这是一个购买的模板。例如， mysite.com 将是索引，然后当我转到另一个页面时它是 mysite.com#!second-page.html
How would I hide a ul in a menu when the page loads? This is my 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>
This is the javascript I have found that is close to what I want:
这是我发现的与我想要的很接近的 javascript：
<script type="text/javascript">$("div.menu-hide").hide()</script>
But I can't seem to target ul.menu-hide. I have tried this
但我似乎无法针对 ul.menu-hide。我试过这个
<script type="text/javascript">$("ul.menu-hide").hide()</script>
回答by NullPoiиteя
try this
试试这个
<script type="text/javascript">
$(window).load(function () {
$("div.menu-hide").hide()
})
</script>
you can also use the
你也可以使用
$(window).ready(function () {
$("div.menu-hide").hide()
})
but the difference is that The document ready event executes already when the HTML-Document is loaded and the DOM is ready, even if all the graphics haven't loaded yet.
但不同的是，文档就绪事件在 HTML 文档加载完毕且 DOM 就绪时已经执行，即使所有图形尚未加载。
The window load event executes a bit later when the complete page is fully loaded, including all frames, objects and images.
当整个页面完全加载时，窗口加载事件会稍后执行，包括所有框架、对象和图像。
Good Read
好读
回答by Simon West
You appear to be missing your document.ready call
您似乎丢失了您的文档。准备呼叫
<script type="text/javascript">$(document).ready(function(){$("ul.menu-hide").hide()});</script>
also ensure that the link to your jQuery library is declared beforeyour other javascript
还要确保在您的其他 javascript之前声明指向您的 jQuery 库的链接
回答by Tim B James
Hiding an HTML element on page load via JavaScript will result in the element producing a flickering effect when it is displayed and then hidden.
通过 JavaScript 在页面加载时隐藏 HTML 元素会导致该元素在显示然后隐藏时产生闪烁效果。
I would hide the element with your css file, and then show via JavaScript.
我会用你的 css 文件隐藏元素，然后通过 JavaScript 显示。
css code:
css代码：
.menu-hide{ display: none; }
jQuery show code:
jQuery 显示代码：
$(function(){
$('.menu-hide').show();
});
