本文實例講述了jQuery實現的checkbox級聯選擇下拉菜單效果。分享給大家供大家參考，具體如下：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title><script language="JavaScript" src="jquery-1.4.2.min.js"></script></head><body><!--table 一行一列：table 三行一列：table 一行一列：table 三行一列：table--> <table width="156"> <tr> <td> <table width="152"> <tr width="152"> <td> <table width="152"> <tr> <td> <table width="98%" align="center"> <tr style="color:red;background:blue" onClick="show('1') "> <td><img src="./ui/images/yonghu.png"></td> <td>用戶管理</td> <td><img src="./ui/images/zhankai.png"></td> </tr> </table> </td> </tr> <tr id="tr0_1" style="DISPLAY: none"> <td> <table width="90%" align="center"> <tr> <td><img src="./ui/images/yonghuxinxi.png"></td> <td>用戶信息</td> </tr> </table> <table width="90%" align="center"> <tr> <td><img src="./ui/images/juesequanxian.png"></td> <td>角色權限</td> </tr> </table> </td> </tr> </table> </td> </tr> <tr width="152"> <td> <table width="152"> <tr> <td> <table width="98%" align="center"> <tr style="color:red;background:blue" onClick="show('2') "> <td><img src="./ui/images/kehu.png"></td> <td>客戶管理</td> <td><img src="./ui/images/zhankai.png"></td> </tr> </table> </td> </tr> <tr id="tr0_2" style="DISPLAY: none"> <td><!-- 一列兩個table--> <table width="90%" align="center"> <tr> <td><img src="./ui/images/kehuxinxi.png"></td> <td>客戶信息</td> </tr> </table> <table width="90%" align="center"> <tr> <td><img src="./ui/images/lianxiren.png"></td> <td>聯系人列表</td> </tr> </table> </td> </tr> </table> </td> </tr> <tr width="152"> <td> <table width="152"> <tr> <td> <table width="98%" align="center"> <tr style="color:red;background:blue" onClick="show('3')"> <td><img src="./ui/images/xitong.png"></td> <td>系統管理</td> <td><img src="./ui/images/zhankai.png"></td> </tr> </table> </td> </tr> <tr id="tr0_3" style="DISPLAY: none"> <td> <table width="90%" align="center"> <tr> <td><img src="./ui/images/xitongrizhi.png"></td> <td>系統日志</td> </tr> </table> <table width="90%" align="center"> <tr> <td><img src="./ui/images/shujuzidian.png"></td> <td>數據字典</td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table></body><script language="JavaScript"><!--js dom: 根據tr0_id, id的值，進行操作。得到tr的length，遍歷，判斷id值，根據傳入的id值，拼裝tr0_id,--><!--拿到對應的tr元素，設置 顯示或隱藏 -->function show(id){ //使用循環遍歷找到需要控制的所有隱藏的tr var $tr = $("tr[id^='tr0']");// alert($tr.length); $tr.each(function(index,domEle){ //查找當前onclick操作的tr //檢查 每次循環遍歷 操作要對應的tr，隱藏的，就三個，看看是哪一個 // if(id==index+1){ //如果當前的tr處于隱藏狀態，就得顯示 if($(this).is(":hidden")){ $(this).attr("style","DISPLAY: block"); } //如果當前的tr處于顯示狀態，就得隱藏 else{ $(this).attr("style","DISPLAY: none"); } } <!--把其他的打開的 隱藏 每次都會遍歷--> else{ //將不選擇的tr都隱藏 $(domEle).attr("style","DISPLAY: none"); } })}</script></html>更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery表格(table)操作技巧匯總》、《jQuery切換特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、《jquery中Ajax用法總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
