abstract：本文實(shí)例講述了jQuery實(shí)現(xiàn)的checkbox級(jí)聯(lián)選擇下拉菜單效果。分享給大家供大家參考，具體如下：<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>&
本文實(shí)例講述了jQuery實(shí)現(xiàn)的checkbox級(jí)聯(lián)選擇下拉菜單效果。分享給大家供大家參考，具體如下：
<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>角色權(quán)限</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><!-- 一列兩個(gè)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>聯(lián)系人列表</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>系統(tǒng)管理</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>系統(tǒng)日志</td>
</tr>
</table>
<table width="90%" align="center">
<tr>
<td><img src="./ui/images/shujuzidian.png"></td>
<td>數(shù)據(jù)字典</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
<script language="JavaScript">
<!--js dom: 根據(jù)tr0_id, id的值，進(jìn)行操作。得到tr的length，遍歷，判斷id值，根據(jù)傳入的id值，拼裝tr0_id,-->
<!--拿到對(duì)應(yīng)的tr元素，設(shè)置 顯示或隱藏 -->
function show(id){
//使用循環(huán)遍歷找到需要控制的所有隱藏的tr
var $tr = $("tr[id^='tr0']");
// alert($tr.length);
$tr.each(function(index,domEle){
//查找當(dāng)前onclick操作的tr
//檢查 每次循環(huán)遍歷 操作要對(duì)應(yīng)的tr，隱藏的，就三個(gè)，看看是哪一個(gè)
//
if(id==index+1){
//如果當(dāng)前的tr處于隱藏狀態(tài)，就得顯示
if($(this).is(":hidden")){
$(this).attr("style","DISPLAY: block");
}
//如果當(dāng)前的tr處于顯示狀態(tài)，就得隱藏
else{
$(this).attr("style","DISPLAY: none");
}
}
<!--把其他的打開的 隱藏 每次都會(huì)遍歷-->
else{
//將不選擇的tr都隱藏
$(domEle).attr("style","DISPLAY: none");
}
})
}
</script>
</html>更多關(guān)于jQuery實(shí)現(xiàn)的checkbox級(jí)聯(lián)選擇下拉菜單效果示例請(qǐng)關(guān)注PHP中文網(wǎng)（ipnx.cn）其他文章！