Question

它使用 jquery 1.9.0 ， onDomReady 和规范化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>

结果是：

enter image description here

但是有一个问题，我将代码添加到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="&#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>

所以，正如你可以看到子菜单不起作用，可能导致故障的原因是什么？

我怀疑不同的问题：

可能包含代码的 onDomReady 属性，因此它将在onDomReady窗口事件中运行，如果是这样，我如何在代码上指明：

$（document）.ready（function（）{ //在menu.js中添加所有JS代码 }）;
标准化的CSS，但是可以进行重置....
Theres是jquery 1.9.0中的一个问题，可能是使用js的顺序......

您怎么看？

Answer 1

是的，你是对的;

onDomReadycode是：

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

好像你将jsfiddle中的事件更改为正文包装它不起作用。

Answer 2

在此处查看相同的小提琴，修改后可以使用您想要的内容：JS Fiddle Link

它与你发布的完全相同的小提琴，只是 onDomReady 设置为“没有换行（头）”和JavaScript代码包含在ready函数中。这使它适用于您发布的HTML。

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

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

中的操纵

jsfiddle代码工作，但在演示页面时不是

2 个答案: