Question

我觉得很奇怪。我无法弄清楚原因。

首先，我将js文件放在<head>上。如下所示：

<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>

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

对于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>

对于JS：

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

AND CSS：

.subMenu { display: none; }

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

Answer 1

应先加载

<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>

Answer 2

首先加载jquery，jquery migrate是插件，所以在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(){ 
        $('.mainMenu').children('li').on('click', function() {
        $(this).children('ul').slideToggle('slow'); 
        });
    });  
___ ^--- not close

Answer 3

我不确定是不是这样。你必须把你的代码放在

中

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

所以你要告诉jQuery在加载所有HTML元素后加载/操作dom元素。

现在，我们明确了为什么your fiddle正在发挥作用。

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

注意： 当然，在加载脚本时保持顺序，因为您不想调用尚未加载的功能。< / em>的

Answer 4

添加以下代码并再试一次，它应该工作与否？

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

jQuery幻灯片切换菜单不起作用

4 个答案: