<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.7.2.min.js" ></script>
<script type="text/javascript">
$(function() {
//一级菜单点击
$('#first li').click(function() {
var id = $(this).attr('id');
console.log(id);
//$("#ruleType_"+id).siblings('tr not(.act)').css("display","none");
$("tr[id*='ruleType_']").css("display","none");
$("#ruleType_"+id).css("display","");
});
});
//二级菜单点击
function chooseClass(id){
$("tr[id*='ruleType_t_']").css("display","none");
$("#ruleType_t_"+id).css("display","");
}
</script>
</head>
<body>
<table>
<tr class="act">
<td>规则类型:</td>
<td>
<ul id="first">
<li id="1">触发规则</li>
<li id="2">免打扰规则</li>
<li id="3">接触控制规则</li>
</ul>
</td>
</tr>
<tr id="ruleType_1" style="display: none;">
<td>触发规则类型:</td>
<td>
<ul>
<li id="11" onclick="chooseClass('11')">位置触发</li>
<li id="12" onclick="chooseClass('12')">系统触发</li>
</ul>
</td>
</tr>
<tr id="ruleType_2" style="display: none;">
<td>免打扰规则类型:</td>
<td>
<ul>
<li id="21" onclick="chooseClass('21')">红黑名单规则</li>
<li id="22" onclick="chooseClass('22')">自定义规则</li>
</ul>
</td>
</tr>
<tr id="ruleType_3" style="display: none;">
<td>接触控制规则</td>
<td>
<ul>
<li id="31">输入周期次数</li>
</ul>
</td>
</tr>
<tr id="ruleType_t_11" style="display: none;" >
<td>位置触发</td>
<td>上传文件</td>
</tr>
<tr id="ruleType_t_12" style="display: none;">
<td>4G首话单</td>
<td>
<ul>
<li>是</li>
<li>否</li>
</ul>
</td>
</tr>
<tr id="ruleType_t_21" style="display: none;">
<td>红黑名单</td>
<td>
<ul>
<li>红名单</li>
<li>黑名单</li>
</ul>
</td>
</tr>
<tr id="ruleType_t_22" style="display: none;">
<td>自定义规则</td>
<td>选择免打扰客户群</td>
</tr>
</table>
</body>
</html>
Jquery三级菜单切换
最新推荐文章于 2022-01-20 11:43:22 发布