<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /><title>jquery</title><style type="text/css">ul{float:left}li{list-style-type:none;}ul ul li{}</style><script src="jquery-1.4.3.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function(){ $("ul li").next("ul").hide(); $("ul li").mouseover(function() { $(this).next("ul").slideDown(); }); $("ul ul").mouseleave(function() { $(this).slideUp(); }); $('ul ul li').mouseover(function(){$(this).css('background-color','red');});$('ul ul li').mouseout(function(){$(this).css('background-color','white');});})</script></head><body> <ul > <li>one</li> <ul > <li>1</li> <li>2</li> <li>3</li> </ul> </ul> <ul > <li>two</li> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </ul> <ul > <li>three</li> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </ul></body></html>
上面是一個下拉式功能表效果的源碼，如下：
提出如下問題：
1.為什麼要用$(document).ready()事件？
--不用不行，呵呵。
當DOM載入就緒可以查詢及操縱時綁定一個要執行的函數。
這是事件模組中最重要的一個函數，因為它可以極大地提高web應用程式的響應速度。
簡單地說，這個方法純粹是對向window.load事件註冊事件的替代方法。通過使用這個方法，可以在DOM載入就緒能夠讀取並操縱時立即調用你所綁定的函數，而99.99%的JavaScript函數都需要在那一刻執行。
2.$("ul ul").mouseleave()改成mouseout為啥不行？
--
大家知道事件的冒泡特性，在上面的BUG中也正是因為這個冒泡特性，對於mouseover事件來說 ，當滑鼠從其他元素 移動到 child節點時發生，但此事件會冒泡 所以會導致 parent 也出發mouseover。如果我們對 parent註冊了 mouseover監聽，從 parent移動到child 同樣出發parent的mouseover 有時候我們不希望這樣的事情發生。
對於 mouseover 和mouseenter 兩個事件 最大的區別就是 mouseenter 是 不冒泡的事件，這時候 如果註冊的監聽 是mouseenter的話 無論滑鼠從任何元素 移動到child時 只有child元素 發生mouseenter事件 而其祖宗節點 都不會因為冒泡 而觸發此事件。
3.你能讓1、2、3與one對齊嗎？
改成如下排列，以li為單位
<ul> <li><a href="#">AAAAA</a> <ul ><li><a href="#">11</a></li><li><a href="#">22</a></li><li><a href="#">33</a></li><li><a href="#">44</a></li></ul> </li>
</ul>
下面是相對強大點的執行個體
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><script src="js/jquery-1.5.1.min.js"></script><script type="text/javascript">$(function(){ $('.meun').hover(function(){ $(this).find('ul').stop(true,true).slideDown(); },function(){$(this).find('ul').stop(true,true).slideUp('fast'); })}) </script><style>*{margin:0;padding:0;}a{text-decoration:none;color:#333;font-size:14px;}ul{list-style:none;}.nav{display:inline-block;margin:20px;height:30px;line-height:30px;background:#eee;}.meun {float:left;position:relative;}.meun a{display:inline-block;padding:0 10px;}.meun a:hover{background:#333;}.meun a:hover{color:#fff;}.meun ul{display:none;position:absolute;left:0;top:30px;width:100px;background:#eee;border:1px solid #d3d3d3}.meun ul a{display:block;}</style></head><body><div class="nav"> <ul> <li class="meun in1"><a href="#">AAAAA</a> <ul id="sub_01" class="sub" ><li><a href="#">11</a></li><li><a href="#">22</a></li><li><a href="#">33</a></li><li><a href="#">44</a></li></ul> </li><li class="meun in2"><a href="#">BBBBB</a><ul id="sub_01" class="sub" ><li><a href="#">11</a></li><li><a href="#">22</a></li><li><a href="#">33</a></li><li><a href="#">44</a></li></ul></li><li class="meun in1"><a href="#">CCCCC</a> <ul id="sub_01" class="sub" ><li><a href="#">11</a></li><li><a href="#">22</a></li><li><a href="#">33</a></li><li><a href="#">44</a></li></ul> </li> </ul> </div> </body></html>
我覺得這個可移植性很好，比較清晰。。。。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
