Javascript jQuery幻灯片切换菜单不支持'；行不通

我觉得很奇怪。我不明白为什么

首先，我将js文件放在

上。如下所示：

此外，我的菜单导航代码如下所示：

用于HTML

<ul class="mainMenu">
      <li>LINK 1
          <ul class="subMenu">
            <li>SUB LINK 1</li>
            <li>SUB LINK 2</li>
            <li>SUB LINK 3</li>
            <li>SUB LINK 4</li>
           </ul>
      </li>
      <li> LINK 2 </li>
    </ul>

链接1

子链路1
子链路2
子链接3
子链路4


链接2

对于JS：

$（文档）.ready（函数（）{
$（'.mainMenu'）.children（'li'）.on（'click'，function（））{
$（this.children（'ul'）。slideToggle（'slow'）；
});
}

和CSS：

。子菜单{
显示：无；
}

这是。它在JSFIDLE中工作，但在我的服务器中不工作。我想知道为什么。有什么想法吗？

应该先加载

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

加载jQuery时，加载其他组件

<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>

---

首先加载jquery，jquery迁移是插件，所以在jquery框架之后加载

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>

---

我不确定是不是这样。你必须把代码放进去

$(document).ready(function(){ // here });

因此，您告诉jQuery在加载所有HTML元素之后加载/操作dom元素

现在问题来了，为什么你的工作

这是因为，$（document）.ready（function（）{}）；它已经内置在jsFiddle的jspanal中。因此，无论您在该面板上编写什么jQuery，它都将进入$（document）.ready（function（）{//here}）中，这意味着您的所有代码都将在页面加载完成后运行

---

注意：加载脚本时当然要保持顺序，因为您不想调用尚未加载的函数。

添加下面的代码，然后再试一次，它是否应该工作

$(document).ready(function(){ 
   $('.mainMenu').children('li').on('click', function() {
         $(.subMenu).css("display", "block");
         $(this).children('ul').slideToggle('slow'); 
   });
});

---

第一次加载code.jquery.com/jquery-1.9.1.js">@巴拉：好的，我试过了，但仍然不起作用。我重新修改问题时，你能看看更新的问题吗？你能再次检查更新的问题吗？我按照你的要求做了。它仍然不起作用。哦，是的，我错过了最后的引语。谢谢你！好的，我试过了，但仍然不起作用。你能看看更新的问题吗“我重新修改了这个问题。”花花公子很乐意帮助你

$(document).ready(function(){ 
   $('.mainMenu').children('li').on('click', function() {
         $(.subMenu).css("display", "block");
         $(this).children('ul').slideToggle('slow'); 
   });
});