我正在测试 this fiddle由 @Ilan Biala 撰写
它使用 jquery 1.9.0、onDomReady 和 Normalized css 在菜单中添加子菜单，您可以在 jsfiddle 上看到。 例如 html 是:
<nav>
<ul>
<li><a href="#" >Sec1</a></li>
<li><a href="#" >Sec2</a></li>
<li><a href="#" class="current">Sec3</a></li>
<li><a href="contacto.html" >Sec4</a></li>
<ul class="menu">
<li><a href="#" class="documents" data-icon="">Documents</a></li>
<br>
<li><a href="#" class="messages" data-icon="">Messages</a></li>
<br>
<li><a href="#" class="signout" data-icon="">Sign Out</a></li>
</ul>
</ul>
</nav>
结果是:
但是有一个问题，我正在将代码添加到 server I have access ，并添加了以下行:
<link rel="stylesheet" type="text/css" href="css/menu.css" />
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
模拟 jsfiddle 中的那些。 html 是:
<!doctype html>
<head>
<title>Example</title>
<link rel="stylesheet" type="text/css" href="css/menu.css" />
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
</head>
<body>
<nav>
<ul>
<li><a href="#" >Sec1</a></li>
<li><a href="#" >Sec2</a></li>
<li><a href="#" class="current">Sec3</a></li>
<li><a href="contacto.html" >Sec4</a></li>
<ul class="menu">
<li><a href="#" class="documents" data-icon="">Documents</a></li>
<br>
<li><a href="#" class="messages" data-icon="">Messages</a></li>
<br>
<li><a href="#" class="signout" data-icon="">Sign Out</a></li>
</ul>
</ul>
</nav>
</body>
</html>
因此，如您所见，子菜单无法正常工作，可能是什么导致了故障？
我怀疑不同的问题:
也许是包装代码的 onDomReady 属性，这样它将在 onDomReady 窗口事件中运行，如果是这样我如何在代码上指出:
$(文档).ready(函数() { //在 menu.js 中添加所有 JS 代码 });
规范化的 css，但应该进行重置....
jquery 1.9.0 中存在问题，可能是使用 js 的顺序...
你怎么看？
最佳答案
是的，你是对的；
onDomReadycode 是:
$(document).ready(function(){
//your code
})
就好像您将 jsfiddle 中的事件更改为 body wrap 一样，它不会起作用。
关于javascript - jsfiddle 代码工作但在演示页面中时不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14427258/