jQuery是一個優(yōu)秀的JavaScript庫,其強大的遞歸功能可以輕松創(chuàng)建復雜的菜單。
//HTML代碼 <ul id="menu"> <li>菜單1 <ul> <li>子菜單1-1</li> <li>子菜單1-2 <ul> <li>子菜單1-2-1</li> <li>子菜單1-2-2</li> </ul> </li> </ul> </li> <li>菜單2</li> <li>菜單3 <ul> <li>子菜單3-1</li> <li>子菜單3-2</li> </ul> </li> </ul> //jQuery代碼 $(function(){ var $menu = $('#menu'); $menu.menu(); //初始化菜單 //遞歸遍歷菜單 function traverseMenu($element){ $element.children('li').each(function(index){ var $li = $(this); var $ul = $li.children('ul'); //查找該li下面的ul if($ul.length>0){ traverseMenu($ul); //如果ul存在,則遞歸遍歷 } //...此處省略菜單項的處理代碼 }); } traverseMenu($menu); //調用遞歸函數遍歷菜單 });
上述代碼中,使用了jQuery UI的menu組件來生成菜單。通過調用遞歸函數traverseMenu來遍歷所有菜單項,根據菜單的結構逐層遞歸,處理每一個菜單項的信息。
上一篇富文本框css無法使用
下一篇jquery 速查表