0

我正在测试@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="&#xe000">Documents</a></li>
            <br>
            <li><a href="#" class="messages" data-icon="&#xe001">Messages</a></li>
            <br>
            <li><a href="#" class="signout" data-icon="&#xe002">Sign Out</a></li>
        </ul>
    </ul>
</nav>

结果是：

在此处输入图像描述

但是有一个问题，我将代码添加到我可以访问的服务器，并添加了以下行：

<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="&#xe000">Documents</a></li>
            <br>
            <li><a href="#" class="messages" data-icon="&#xe001">Messages</a></li>
            <br>
            <li><a href="#" class="signout" data-icon="&#xe002">Sign Out</a></li>
        </ul>
    </ul>
</nav>
</body>
</html>

那么，正如您所看到的，子菜单不起作用，是什么导致了故障？

我怀疑不同的问题：

  1. 也许是包装代码的onDomReady属性，因此它将在 onDomReady 窗口事件中运行，如果是这样，我该如何在代码上指出这一点：

    $(document).ready(function() { //在 menu.js 中添加所有 JS 代码 });

  2. 规范化的 css，但应该进行重置....

  3. jQuery 1.9.0 中存在问题，可能是使用 js 的放置顺序...

你怎么看？

4

2 回答 2

2

你是对的;

onDomReadycode 是：

$(document).ready(function(){
//your code
})

就好像您将 jsfiddle 中的事件更改为 body wrap 它不起作用。

于 2013-01-20T17:41:43.677 回答
1

请参阅此处修改为使用您想要的相同的小提琴：JS Fiddle Link

它与您发布的小提琴完全相同，只是将 onDomReady设置为“ no wrap (head) ”并将 JavaScript 代码包装在ready函数中。这使它与您发布的 HTML 一起工作。 

// jQuery(document).ready(function($) {
jQuery(function($) {
 ....
 // your code
});

因此，作为答案，当您在文档的head标记中加载 jQuery 时html，您需要使用.ready()jQuery 的 API 并将所有代码包装在ready function

于 2013-01-20T18:13:35.523 回答