jQuery Slide Toggle菜单不起作用

花哨

我觉得很奇怪。我不知道为什么。

首先，我将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'); }); }

和CSS：

.subMenu { display: none; }

这是JSFIDDLE。它在JSFiddle中工作，但在我的服务器中不工作。我想知道为什么。任何的想法？

Ashaduzzaman博士

我不确定是否是这种情况。您必须将代码放入其中

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

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

现在，问题来了，为什么您的小提琴正在工作。

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。