jquery問題：爲什麼我的代碼不受jQuery的影響？

我正在學習Jquery，我似乎無法鍛鍊我在這個基本代碼中的錯誤。目標是當用戶將鼠標懸停在「菜單項2」上時顯示下拉菜單。請有人幫我看看我的錯誤。這裏是對代碼的鏈接，如果它不正確顯示如下：http://www.door9.co.uk/nav.html jquery問題：爲什麼我的代碼不受jQuery的影響？

<style> 
    ul   {list-style : none; padding : 0; width: 100%; } 
    ul li  {display: inline;} 
    li   {display : inline; margin-right : 20px; } 
    li ul  {display : none; } 
    li:hover ul {display : block; width: 145px; position: relative; left: 160px; } 
</style> 

<body> 
<div> 
    <ul> 
    <li>Main list item one</li> 
    <li>Main list item two &darr; 
     <ul> 
      <li>Sub list item one</li> 
      <li>Sub list item two</li> 
      <li>Sub list item three</li> 
     </ul> 
    </li> 
    <li>Main list item three</li> 
    <li>Main list item four</li> 
    </ul><!-- UL close --> 
</div> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1 jquery.min.js"></script> 

<script> 
    $(document).ready(function(){ 
    $('li').has('ul').hover(function(){ 
     $('li ul').slideToggle(function(){ 
      $('li ul').slideToggle(); 
     }); 
    }); 
    }); 
</script> 

</body>

來源

2013-03-05 Andrew John

對我的作品中鉻（至少它animnates菜單） – DavidB 2013-03-05 11:12:30

爲什麼使用。先後（「UL」）？除非你在另一個元素中有一些元素，比如'nav'元素，你不需要這個額外的方法 – atmd 2013-03-05 11:19:52

如何讓子菜單在菜單項2下切換。它似乎在彈跳... – 2013-03-05 11:21:27

線

li:hover ul {display : block; width: 145px; position: relative; left: 160px; }

在你的CSS可能會干擾。

請問下面的代碼是你在找什麼？

<html> 
<head> 

    <style> 
    ul { list-style: none; padding: 0; width: 100%; } 
    ul li { display: inline; } 
    li { display: inline; margin-right: 20px; } 
    li ul { display: none; } 
    </style> 

</head> 
<body> 

    <ul> 
    <li>Main list item one</li> 
    <li>Main list item two &darr; 
     <ul> 
     <li>Sub list item one</li> 
     <li>Sub list item two</li> 
     <li>Sub list item three</li> 
     </ul> 
    <li>Main list item three</li> 
    <li>Main list item four</li> 
    </ul> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

    <script>  
    $('li').has('ul').hover(function() { 
     $(this).children('ul').slideToggle(); 
    }); 
    </script> 

</body> 
</html>

如果你想在風格你li>ul也許寫的風格融入li ul選擇（不li:hover ul），然後在jQuery的使用hide()文件加載時。當您的查看器關閉或不可用JavaScript時（這是因爲在目前的情況下，如果JavaScript關閉，li>ul不會顯示），這也是很好的做法。

此外，選擇li和ul li似乎是多餘的，但我離題...

來源

2013-03-05 11:32:59 mbaytas

1）jQuery hover方法有兩個參數，MouseEnter事件處理程序，並MouseLeave事件處理程序。（你只有一個）

2）你似乎選擇處理程序內的所有子菜單。很可能你只想要你正在盤旋的物品。

這可能是更接近你想達到什麼目的：

$("li").has("ul").hover(function() { 
    $(this).find("ul").slideDown(); 
}, function() { 
    $(this).find("ul").slideUp(); 
});

來源

2013-03-05 11:24:26 xec

jquery問題：爲什麼我的代碼不受jQuery的影響？

回答

相關問題