jq實現點擊一級菜單div，有且只有它下面的二級菜單進行伸縮展開
訪問時如下：
當點擊一級菜單時，點擊的菜單有的二級菜單展開，其它的二級菜單收縮，再次點擊這個菜單，二級菜單收縮。
<!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" xml:lang="en-us"> <head> <title>DL Demo</title> <script src="http://code.jquery.com/jquery-1.1.3.1.pack.js"></script> <script> $(document).ready(function(){ $("dd").hide(); $("dt").css({cursor:"pointer"}); $.each($("dt"), function(){ $(this).click(function(){ $("dd").not($(this).next()).hide(); $(this).next().toggle(500); //$(this).next().toggle(); }); }); }); </script> <style> body { font-family: Arial; font-size: 16px; } dl { width: 300px; } dl,dd { margin: 0; } dt { background: #F39; font-size: 18px; padding: 5px; margin: 2px; width: 100%;} dt a { color: #FFF; } dd a { color: #000; } ul { list-style: none; padding: 5px;margin:0; } </style> </head> <body> <dl> <dt><a href="">jQuery</a></dt> <dd> <ul> <li><a href="">Download</a></li> <li><a href="">Documentation</a></li> <li><a href="">Blog</a></li> </ul> </dd> <dt><a href="">Community</a></dt> <dd> <ul> <li><a href="">Mailing List</a></li> <li><a href="">Tutorials</a></li> <li><a href="">Demos</a></li> <li><a href="">Plugins</a></li> <li><a href="">Plugins</a></li> <li><a href="">Plugins</a></li> <li><a href="">Plugins</a></li> <li><a href="">Plugins</a></li> <li><a href="">Plugins</a></li> </ul> </dd> <dt><a href="">Development</a></dt> <dd> <ul> <li><a href="">Source Code</a></li> <li><a href="">Bug Tracking</a></li> <li><a href="">Recent Changes</a></li> </ul> </dd> </dl> </body> </html>
如下圖，整個菜單欄都在dl標籤下，dt
