Javascript JSFIDLE代码正在工作，但在演示页面中不可用_Javascript_Html_Css_Jsfiddle

Javascript JSFIDLE代码正在工作，但在演示页面中不可用

javascript html css

Javascript JSFIDLE代码正在工作，但在演示页面中不可用,javascript,html,css,jsfiddle,Javascript,Html,Css,Jsfiddle,我正在测试由它使用jquery 1.9.0、onDomReady和规范化css在菜单中添加子菜单，如您在JSFIDLE上看到的。例如，html是： <nav> <ul> <li><a href="#" >Sec1</a></li> <li><a href="#" >Sec2</a></li> <li><

我正在测试由

它使用jquery 1.9.0、onDomReady和规范化css在菜单中添加子菜单，如您在JSFIDLE上看到的。例如，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>

来模仿JSFIDLE中的那些。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窗口事件中运行，如果是，我如何在代码上指出：

$（文档）.ready（函数（）{ //在menu.JS中添加所有JS代码 });

规范化的css，但这是用来进行重置的

jQuery1.9.0中有一个问题，可能是使用js的顺序

你怎么想？

是的，你是对的

onDomReadycode是：

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

好像您将JSFIDLE中的事件更改为body wrap一样，它将不起作用。

是的，您是对的

onDomReadycode是：

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

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

请参见此处修改的同一小提琴，以处理您想要的内容：

它与您发布的完全相同，只是onDomReady设置为“no wrap（head）”并将JavaScript代码包装在

ready

函数中。这使得它可以与您发布的HTML一起工作

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

因此，作为一个答案，当您将jQuery加载到

html

文档的

head

标记中时，您需要使用jQuery的

.ready（）

API，并将所有用于任何DOM操作的代码包装到

ready

函数中

查看此处修改的同一小提琴，以处理您想要的内容：

它与您发布的完全相同，只是onDomReady设置为“no wrap（head）”并将JavaScript代码包装在

ready

函数中。这使得它可以与您发布的HTML一起工作

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

因此，作为一个答案，当您将jQuery加载到

html

文档的

head

标记中时，您需要使用jQuery的

.ready（）

API，并将所有用于任何DOM操作的代码包装在

ready

函数中

，因此如果我理解的话，我应该将

$（document）.ready（function（）{/themenu.js}）

在html中，或者在menu.js中，我做

$（document.ready（function（）{//the menu.js functions}）

哪个选项？打开menu.js并在文件顶部开始$（document.ready）（function（）{和在文件末尾放置}）；所以，如果我明白了，我应该把

$（document）.ready（function（）{//themenu.js}）

放在html中，或者在menu.js中我把

$（document.ready（function（）{//themenu.js functions}）

放在哪个选项上？打开menu.js，在文件的开头$（document.ready）写在文件的顶部（function（）{和文件的末尾put}）；