jQuery Slide Toggle菜單不起作用
[英]jQuery Slide Toggle Menu doesn't work
問題描述
我覺得很奇怪。 我不知道為什么。
首先，我將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中工作，但在我的服務器中不工作。 我想知道為什么。 任何想法？
4 個解決方案
解決方案1
0 2014-11-24 09:19:51
應該先加載
<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>
解決方案2
0 2014-11-24 09:20:39
首先加載jquery，jquery migration是插件，因此在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
解決方案3
0 已采納 2014-11-24 09:22:54
我不確定是否是這種情況。 您必須將代碼放入其中
$(document).ready(function(){ // here });
因此，您正在告訴jQuery在所有HTML元素均已加載之后加載/操作dom元素。
現在，問題來了，為什么您的小提琴正在工作。
這是因為$（document）.ready（function（）{}）; 它已經內置在jsFiddle的js Panal內部。 因此，無論您在該面板上編寫什么jQuery，都將放入$（document）.ready（function（）{//這里}）中 ，這意味着所有代碼將在頁面加載完成后運行。
注意： 當然，要相應地加載腳本，請保持順序，因為您不想調用尚未加載的函數。
解決方案4
0 2014-11-24 09:35:50
添加下面的代碼，然后再試一次，應該可以正常工作嗎？
$(document).ready(function(){
$('.mainMenu').children('li').on('click', function() {
$(.subMenu).css("display", "block");
$(this).children('ul').slideToggle('slow');
});
});
jQuery的切換菜單不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.