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

jQuery Slide Toggle Menu doesn't work

本文关键字：菜单 不起作用 幻灯片 jQuery      更新时间：2023-09-26

我觉得很奇怪。我想不通为什么。

首先，我把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 中工作，但在我的服务器中不起作用。我想知道为什么。知道吗？

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

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

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

现在来了，为什么你的小提琴在工作。

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

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

应该先加载

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

添加下面的代码，然后重试，它应该有效与否？

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