jQuery微信自定义菜单设置功能代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery微信自定义菜单设置功能代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery微信自定义菜单设置功能代码</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/pagebase.css" />
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script type="text/javascript" src="js/customMenu.js"></script>
<style>
/*页面默认设置*/
body {
font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande",
	"Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB",
	"Hiragino Sans GB W3", "WenQuanYi Micro Hei", sans-serif;
}
/*解决win8 IE10 兼容  s*/
@
-webkit-viewport {
width: device-width;
}
@
-moz-viewport {
width: device-width;
}
@
-ms-viewport {
width: device-width;
}
@
-o-viewport {
width: device-width;
}
@
viewport {
width: device-width;
}
/*三大模块 共用样式*/
body, html {
height: 100%;
font-family: "Microsoft YaHei";
}
.tishi {
background-color: #F9EDBE;
border: 1px solid #F0C36D;
padding: 7px;
box-shadow: 0 0 3px #000;
}
.huise_btn {
background-color: #F3F3F3;
}
.caidan_tab {
}
.biaotou {
background-color: #EEEEEE;
border-bottom: none;
}
</style>

</head>
<body>
<script>
//弹出垂直菜单
$(".menu").click(function() {
if ($(this).hasClass("cura")) {
	$(this).children(".new-sub").hide(); //当前菜单下的二级菜单隐藏
	$(".menu").removeClass("cura"); //同一级的菜单项
} else {
	$(".menu").removeClass("cura"); //移除所有的样式
	$(this).addClass("cura"); //给当前菜单添加特定样式
	$(".menu").children(".new-sub").hide(); //隐藏所有的二级菜单
	$(this).children(".new-sub").show(); //展示当前的二级菜单
}
});
//弹出垂直菜单end
//底部右侧弹出隐藏
var flag4 = 1;
$(".btn-open-close,.btn-fullbg").click(function() {
if (flag4 == 1) {
	$(".btn4,.expan4,.btn-fullbg").show();
	$(".btn-open-close").addClass('expan3');
	flag4 = 0;
} else {
	$(".btn-fullbg,.new-sub,.btn4,.expan4").hide();
	$(".menu").removeClass('cura');
	$(".btn-open-close").removeClass('expan3');
	flag4 = 1;
}
})
//底部右侧弹出隐藏end
</script>
<div class="container">
	<div class="tit">
		<h1>自定义菜单管理</h1>
		<hr style="border-color: #ADADAD;" />
	</div>
	<div class="tishi">
		<p>注意：1级菜单最多只能开启3个，2级子菜单最多开启5个!</p>
		<p>只有保存主菜单后才可以添加子菜单</p>
		<p>生成自定义菜单,必须在已经保存的基础上进行,临时勾选启用点击生成是无效的! 第一步必须先修改保存状态！第二步点击生成!</p>
		<p>当您为自定义菜单填写链接地址时请填写以"http://"开头，这样可以保证用户手机浏览的兼容性更好</p>
		<p>撤销自定义菜单：撤销后，您的微信公众帐号上的自定义菜单将不存在；如果您想继续在微信公众帐号上使用自定义菜单，请点击“生成自定义菜单”按钮，将重新启用！</p>
	</div>
	<br />
	<!--<div class="zhucaidan">
			<input type="button" class="btn btn-default huise_btn" value="+添加主菜单" onclick="add_zhu()">
		</div>-->
	<br />
	<div class="edit_caidan">
		<table class="table table-hover caidan_tab">
			<thead class="biaotou">
				<th>显示顺序</th>
				<th>菜单名称</th>
				<th>触发动作</th>
				<th>响应动作</th>
				<th>启用</th>
				<th>操作</th>
			</thead>
			<tr id="tab1">
				<td><input type="tel" value="1" /></td>
				<td>主：<input type="text" /> &emsp; <input type="button"
					value="+" class="btn btn-primary btn-xs" title="添加子菜单" id="add1" />
				</td>
				<td><select onchange="getValue1()" id="zhu1">
						<option value="0">请选择</option>
						<option value="1">发送信息</option>
						<option value="2">跳转图文信息页</option>
						<option value="3">跳转链接</option>
				</select></td>
				<td>
					<!--<a href="html/wenben.html" id="zhu1_1" style="display: none;"><input type="text" style="border: none;" placeholder="点击编辑文本信息"></a>-->
					<textarea id="zhu1_1" style="display: none;" placeholder="请输入文本消息"></textarea>
					<a href="imageTextList.html" id="zhu1_2" style="display: none;"><input
						value="点击编辑图文信息" type="button" /></a> <input type="text" id="zhu1_3"
					style="display: none;" placeholder="请输入链接地址" />
				</td>
				<td><input type="checkbox" /></td>
				<td><a href="#">删除</a></td>
			</tr>
			<tr id="z1_zi1" style="display: none;" class="zi1">
				<td><input type="tel" value="11" /></td>
				<td>——子：<input type="text" />
				</td>
				<td><select onchange="getValue11()" id="zhu1_zi1">
						<option value="0">请选择</option>
						<option value="1">发送信息</option>
						<option value="2">跳转图文信息页</option>
						<option value="3">跳转链接</option>
				</select></td>
				<td><textarea id="zhu1_zi1_1" style="display: none;"
						placeholder="请输入文本消息"></textarea> <a href="imageTextList.html"
					id="zhu1_zi1_2" style="display: none;"><input value="点击编辑图文信息"
						type="button" /></a> <input type="text" id="zhu1_zi1_3"
					style="display: none;" placeholder="请输入链接地址" /></td>
				<td><input type="checkbox" /></td>
				<td><a href="#">删除</a></td>
			</tr>
			<tr id="z1_zi2" style="display: none;" class="zi1">
				<td><input type="tel" value="11" /></td>
				<td>——子：<input type="text" />
				</td>
				<td><select onchange="getValue12()" id="zhu1_zi2">
						<option value="0">请选择</option>
						<option value="1">发送信息</option>
						<option value="2">跳转图文信息页</option>
						<option value="3">跳转链接</option>
				</select></td>
				<td><textarea id="zhu1_zi2_1" style="display: none;"
						placeholder="请输入文本消息"></textarea> <a href="imageTextList.html"
					id="zhu1_zi2_2" style="display: none;"><input value="点击编辑图文信息"
						type="button" /></a> <input type="text" id="zhu1_zi2_3"
					style="display: none;" placeholder="请输入链接地址" /></td>
				<td><input type="checkbox" /></td>
				<td><a href="#">删除</a></td>
			</tr>
			<tr id="z1_zi3" style="display: none;" class="zi1">
				<td><input type="tel" value="11" /></td>
				<td>——子：<input type="text" />
				</td>
				<td><select onchange="getValue13()" id="zhu1_zi3">
						<option value="0">请选择</option>
						<option value="1">发送信息</option>
						<option value="2">跳转图文信息页</option>
						<option value="3">跳转链接</option>
				</select></td>
				<td><textarea id="zhu1_zi3_1" style="display: none;"
						placeholder="请输入文本消息"></textarea> <a href="imageTextList.html"
					id="zhu1_zi3_2" style="display: none;"><input value="点击编辑图文信息"
						type="button" /></a> <input type="text" id="zhu1_zi3_3"
					style="display: none;" placeholder="请输入链接地址" /></td>
				<td><input type="checkbox" /></td>
				<td><a href="#">删除</a></td>
			</tr>
			<tr id="z1_zi4" style="display: none;" class="zi1">
				<td><input type="tel" value="11" /></td>
				<td>——子：<input type="text" />
				</td>
				<td><select onchange="getValue14()" id="zhu1_zi4">
						<option value="0">请选择</option>
						<option value="1">发送信息</option>
						<option value="2">跳转图文信息页</option>
						<option value="3">跳转链接</option>
				</select></td>
				<td><textarea id="zhu1_zi4_1" style="display: none;"
						placeholder="请输入文本消息"></textarea> <a href="imageTextList.html"
					id="zhu1_zi4_2" style="display: none;"><input value="点击编辑图文信息"
						type="button" /></a> <input type="text" id="zhu1_zi4_3"
					style="display: none;" placeholder="请输入链接地址" /></td>
				<td><input type="checkbox" /></td>
				<td><a href="#">删除</a></td>
			</tr>
			<tr id="z1_zi5" style="display: none;" class="zi1">
				<td><input type="tel" value="11" /></td>
				<td>——子：<input type="text" />
				</td>
				<td><select onchange="getValue15()" id="zhu1_zi5">
						<option value="0">请选择</option>
						<option value="1">发送信息</option>
						<option value="2">跳转图文信息页</option>
						<option value="3">跳转链接</option>
				</select></td>
				<td><textarea id="zhu1_zi5_1" style="display: none;"
						placeholder="请输入文本消息"></textarea> <a href="imageTextList.html"
					id="zhu1_zi5_2" style="display: none;"><input value="点击编辑图文信息"
						type="button" /></a> <input type="text" id="zhu1_zi5_3"
					style="display: none;" placeholder="请输入链接地址" /></td>
				<td><input type="checkbox" /></td>
				<td><a href="#">删除</a></td>
			</tr>
			<tr id="tab2">
				<td><input type="tel" value="2" /></td>
				<td>主：<input type="text" /> &emsp; <input type="button"
					value="+" class="btn btn-primary btn-xs" title="添加子菜单" id="add2" />
				</td>
				<td><select onchange="getValue2()" id="zhu2">
						<option value="0">请选择</option>
						<option value="1">发送信息</option>
						<option value="2">跳转图文信息页</option>
						<option value="3">跳转链接</option>
				</select></td>
				<td><textarea id="zhu2_1" style="display: none;"
						placeholder="请输入文本消息"></textarea> <a href="imageTextList.html" id="zhu2_2"
					style="display: none;"><input value="点击编辑图文信息" type="button" /></a>
					<input type="text" id="zhu2_3" style="display: none;"
					placeholder="请输入链接地址" /></td>
				<td><input type="checkbox" /></td>
				<td><a href="#">删除</a></td>
			</tr>
			<tr id="z2_zi1" style="display: none;">
				<td><input type="tel" value="21" /></td>
				<td>——子：<input type="text" />
				</td>
				<td><select onchange="getValue21()" id="zhu2_zi1">
						<option value="0">请选择</option>
						<option value="1">发送信息</option>
						<option value="2">跳转图文信息页</option>
						<option value="3">跳转链接</option>
				</select></td>
				<td><textarea id="zhu2_zi1_1" style="display: none;"
						placeholder="请输入文本消息"></textarea> <a href="imageTextList.html"
					id="zhu2_zi1_2" style="display: none;"><input value="点击编辑图文信息"
						type="button" /></a> <input type="text" id="zhu2_zi1_3"
					style="display: none;" placeholder="请输入链接地址" /></td>
				<td><input type="checkbox" /></td>
				<td><a href="#">删除</a></td>
			</tr>
			<tr id="z2_zi2" style="display: none;">
				<td><input type="tel" value="21" /></td>
				<td>——子：<input type="text" />
				</td>
				<td><select onchange="getValue22()" id="zhu2_zi2">
						<option value="0">请选择</option>
						<option value="1">发送信息</option>
						<option value="2">跳转图文信息页</option>
						<option value="3">跳转链接</option>
				</select></td>
				<td><textarea id="zhu2_zi2_1" style="display: none;"
						placeholder="请输入文本消息"></textarea> <a href="imageTextList.html"
					id="zhu2_zi2_2" style="display: none;"><input value="点击编辑图文信息"
						type="button" /></a> <input type="text" id="zhu2_zi2_3"
					style="display: none;" placeholder="请输入链接地址" /></td>
				<td><input type="checkbox" /></td>
				<td><a href="#">删除</a></td>
			</tr>
			<tr id="z2_zi3" style="display: none;">
				<td><input type="tel" value="21" /></td>
				<td>——子：<input type="text" />
				</td>
				<td><select onchange="getValue23()" id="zhu2_zi3">
						<option value="0">请选择</option>
						<option value="1">发送信息</option>
						<option value="2">跳转图文信息页</option>
						<option value="3">跳转链接</option>
				</select></td>
				<td><textarea id="zhu2_zi3_1" style="display: none;"
						placeholder="请输入文本消息"></textarea> <a href="imageTextList.html"
					id="zhu2_zi3_2" style="display: none;"><input value="点击编辑图文信息"
						type="button" /></a> <input type="text" id="zhu2_zi3_3"
					style="display: none;" placeholder="请输入链接地址" /></td>
				<td><input type="checkbox" /></td>
				<td><a href="#">删除</a></td>
			</tr>
			<tr id="z2_zi4" style="display: none;">
				<td><input type="tel" value="21" /></td>
				<td>——子：<input type="text" />
				</td>
				<td><select onchange="getValue24()" id="zhu2_zi4">
						<option value="0">请选择</option>
						<option value="1">发送信息</option>
						<option value="2">跳转图文信息页</option>
						<option value="3">跳转链接</option>
				</select></td>
				<td><textarea id="zhu2_zi4_1" style="display: none;"
						placeholder="请输入文本消息"></textarea> <a href="imageTextList.html"
					id="zhu2_zi4_2" style="display: none;"><input value="点击编辑图文信息"
						type="button" /></a> <input type="text" id="zhu2_zi4_3"
					style="display: none;" placeholder="请输入链接地址" /></td>
				<td><input type="checkbox" /></td>
				<td><a href="#">删除</a></td>
			</tr>
			<tr id="z2_zi5" style="display: none;">
				<td><input type="tel" value="21" /></td>
				<td>——子：<input type="text" />
				</td>
				<td><select onchange="getValue25()" id="zhu2_zi5">
						<option value="0">请选择</option>
						<option value="1">发送信息</option>
						<option value="2">跳转图文信息页</option>
						<option value="3">跳转链接</option>
				</select></td>
				<td><textarea id="zhu2_zi5_1" style="display: none;"
						placeholder="请输入文本消息"></textarea> <a href="imageTextList.html"
					id="zhu2_zi5_2" style="display: none;"><input value="点击编辑图文信息"
						type="button" /></a> <input type="text" id="zhu2_zi5_3"
					style="display: none;" placeholder="请输入链接地址" /></td>
				<td><input type="checkbox" /></td>
				<td><a href="#">删除</a></td>
			</tr>
			<tr id="tab3">
				<td><input type="tel" value="3" /></td>
				<td>主：<input type="text" /> &emsp; <input type="button"
					value="+" class="btn btn-primary btn-xs" title="添加子菜单" id="add3" />
				</td>
				<td><select onchange="getValue3()" id="zhu3">
						<option value="0">请选择</option>
						<option value="1">发送信息</option>
						<option value="2">跳转图文信息页</option>
						<option value="3">跳转链接</option>
				</select></td>
				<td><textarea id="zhu3_1" style="display: none;"
						placeholder="请输入文本消息"></textarea> <a href="imageTextList.html" id="zhu3_2"
					style="display: none;"><input value="点击编辑图文信息" type="button" /></a>
					<input type="text" id="zhu3_3" style="display: none;"
					placeholder="请输入链接地址" /></td>
				<td><input type="checkbox" /></td>
				<td><a href="#">删除</a></td>
			</tr>
			<tr id="z3_zi1" style="display: none;">
				<td><input type="tel" value="31" /></td>
				<td>——子：<input type="text" />
				</td>
				<td><select onchange="getValue31()" id="zhu3_zi1">
						<option value="0">请选择</option>
						<option value="1">发送信息</option>
						<option value="2">跳转图文信息页</option>
						<option value="3">跳转链接</option>
				</select></td>
				<td><textarea id="zhu3_zi1_1" style="display: none;"
						placeholder="请输入文本消息"></textarea> <a href="imageTextList.html"
					id="zhu3_zi1_2" style="display: none;"><input value="点击编辑图文信息"
						type="button" /></a> <input type="text" id="zhu3_zi1_3"
					style="display: none;" placeholder="请输入链接地址" /></td>
				<td><input type="checkbox" /></td>
				<td><a href="#">删除</a></td>
			</tr>
			<tr id="z3_zi2" style="display: none;">
				<td><input type="tel" value="31" /></td>
				<td>——子：<input type="text" />
				</td>
				<td><select onchange="getValue32()" id="zhu3_zi2">
						<option value="0">请选择</option>
						<option value="1">发送信息</option>
						<option value="2">跳转图文信息页</option>
						<option value="3">跳转链接</option>
				</select></td>
				<td><textarea id="zhu3_zi2_1" style="display: none;"
						placeholder="请输入文本消息"></textarea> <a href="imageTextList.html"
					id="zhu3_zi2_2" style="display: none;"><input value="点击编辑图文信息"
						type="button" /></a> <input type="text" id="zhu3_zi2_3"
					style="display: none;" placeholder="请输入链接地址" /></td>
				<td><input type="checkbox" /></td>
				<td><a href="#">删除</a></td>
			</tr>
			<tr id="z3_zi3" style="display: none;">
				<td><input type="tel" value="31" /></td>
				<td>——子：<input type="text" />
				</td>
				<td><select onchange="getValue33()" id="zhu3_zi3">
						<option value="0">请选择</option>
						<option value="1">发送信息</option>
						<option value="2">跳转图文信息页</option>
						<option value="3">跳转链接</option>
				</select></td>
				<td><textarea id="zhu3_zi3_1" style="display: none;"
						placeholder="请输入文本消息"></textarea> <a href="imageTextList.html"
					id="zhu3_zi3_2" style="display: none;"><input value="点击编辑图文信息"
						type="button" /></a> <input type="text" id="zhu3_zi3_3"
					style="display: none;" placeholder="请输入链接地址" /></td>
				<td><input type="checkbox" /></td>
				<td><a href="#">删除</a></td>
			</tr>
			<tr id="z3_zi4" style="display: none;">
				<td><input type="tel" value="31" /></td>
				<td>——子：<input type="text" />
				</td>
				<td><select onchange="getValue34()" id="zhu3_zi4">
						<option value="0">请选择</option>
						<option value="1">发送信息</option>
						<option value="2">跳转图文信息页</option>
						<option value="3">跳转链接</option>
				</select></td>
				<td><textarea id="zhu3_zi4_1" style="display: none;"
						placeholder="请输入文本消息"></textarea> <a href="imageTextList.html"
					id="zhu3_zi4_2" style="display: none;"><input value="点击编辑图文信息"
						type="button" /></a> <input type="text" id="zhu3_zi4_3"
					style="display: none;" placeholder="请输入链接地址" /></td>
				<td><input type="checkbox" /></td>
				<td><a href="#">删除</a></td>
			</tr>
			<tr id="z3_zi5" style="display: none;">
				<td><input type="tel" value="31" /></td>
				<td>——子：<input type="text" />
				</td>
				<td><select onchange="getValue35()" id="zhu3_zi5">
						<option value="0">请选择</option>
						<option value="1">发送信息</option>
						<option value="2">跳转图文信息页</option>
						<option value="3">跳转链接</option>
				</select></td>
				<td><textarea id="zhu3_zi5_1" style="display: none;"
						placeholder="请输入文本消息"></textarea> <a href="imageTextList.html"
					id="zhu3_zi5_2" style="display: none;"><input value="点击编辑图文信息"
						type="button" /></a> <input type="text" id="zhu3_zi5_3"
					style="display: none;" placeholder="请输入链接地址" /></td>
				<td><input type="checkbox" /></td>
				<td><a href="#">删除</a></td>
			</tr>
		</table>
	</div>
	<div class="chuli">
		<input type="button" class="btn btn-primary" value="保存" />
		&emsp;&emsp;&emsp; <input type="button" class="btn btn-primary"
			value="生成自定义菜单" /> &emsp;&emsp;&emsp; <input type="button"
			class="btn btn-default huise_btn" value="撤销自定义菜单" />
	</div>
</div>
</body>
</html>

JS代码(customMenu.js):

/*function add_zi1(){
	var tr1 = document.getElementById("tab1");
	var s1 = document.getElementsByName("zhicaidan1").length;
	if(s1 <= 4){
	$(tr1).after("<tr name='zhicaidan1'><td><input type='tel' value='11' /></td><td>——子：<input type='text'/></td><td><select onchange='getValue()' id='zhu1'><option value='0'>请选择</option><option value='1'>发送信息</option><option value='2'>跳转图文信息页</option><option value='3'>跳转链接</option></select></td><td><a href='html/wenben.html' id='zhu1_1' style='display:none;
	'><input type='text' style='border:none;
	' placeholder='点击编辑文本信息'/></a><a href='edit.html' id='zhu1_2' style='display:none;
	'><input value='点击编辑图文信息' type='button'/></a><input type='text' id='zhu1_3' style='display:none;
	' placeholder='请输入链接地址' /></td><td><input type='checkbox' /></td><td><a href='#'>删除</a></td></tr>");
}
else{
	return;
}
}
function add_zi2(){
	var tr2 = document.getElementById("tab2");
	var s2 = document.getElementsByName("zhicaidan2").length;
	if(s2 <= 4){
	$(tr2).after("<tr name='zhicaidan2'><td><input type='tel' value='21' /></td><td>——子：<input type='text'/></td><td><select onchange='getValue1()' id='zhu1'><option value='0'>请选择</option><option value='1'>发送信息</option><option value='2'>跳转图文信息页</option><option value='3'>跳转链接</option></select></td><td><a href='html/wenben.html' id='zhu1_1' style='display:none;
	'><input type='text' style='border:none;
	' placeholder='点击编辑文本信息'/></a><a href='edit.html' id='zhu1_2' style='display:none;
	'><input value='点击编辑图文信息' type='button'/></a><input type='text' id='zhu1_3' style='display:none;
	' placeholder='请输入链接地址' /></td><td><input type='checkbox' /></td><td><a href='#'>删除</a></td></tr>");
}
}
function add_zi3(){
	var tr3 = document.getElementById("tab3");
	var s3 = document.getElementsByName("zhicaidan3").length;
	if(s3 <= 4){
	$(tr3).after("<tr name='zhicaidan3'><td><input type='tel' value='31' /></td><td>——子：<input type='text'/></td><td><select onchange='getValue1()' id='zhu1'><option value='0'>请选择</option><option value='1'>发送信息</option><option value='2'>跳转图文信息页</option><option value='3'>跳转链接</option></select></td><td><a href='html/wenben.html' id='zhu1_1' style='display:none;
	'><input type='text' style='border:none;
	' placeholder='点击编辑文本信息'/></a><a href='edit.html' id='zhu1_2' style='display:none;
	'><input value='点击编辑图文信息' type='button'/></a><input type='text' id='zhu1_3' style='display:none;
	' placeholder='请输入链接地址' /></td><td><input type='checkbox' /></td><td><a href='#'>删除</a></td></tr>");
}
}
*/
/*function show_zi1(){
	var i = 0;
	if(i=1){
	document.getElementById("z1_zi1").style.display='table-row';
}
}
*/
window.onload=function(){
	onload1();
	onload2();
	onload3();
}
function onload1(){
	var a = 0;
	document.getElementById("add1").onclick = function(){
	a++;
	if(a == 1){
	document.getElementById("z1_zi1").style.display='table-row';
}
if(a == 2){
	document.getElementById("z1_zi2").style.display='table-row';
}
if(a == 3){
	document.getElementById("z1_zi3").style.display='table-row';
}
if(a == 4){
	document.getElementById("z1_zi4").style.display='table-row';
}
if(a == 5){
	document.getElementById("z1_zi5").style.display='table-row';
}
}
}
function onload2(){
	var b = 0;
	document.getElementById("add2").onclick = function(){
	b++;
	if(b == 1){
	document.getElementById("z2_zi1").style.display='table-row';
}
if(b == 2){
	document.getElementById("z2_zi2").style.display='table-row';
}
if(b == 3){
	document.getElementById("z2_zi3").style.display='table-row';
}
if(b == 4){
	document.getElementById("z2_zi4").style.display='table-row';
}
if(b == 5){
	document.getElementById("z2_zi5").style.display='table-row';
}
}
}
function onload3(){
	var c = 0;
	document.getElementById("add3").onclick = function(){
	c++;
	if(c == 1){
	document.getElementById("z3_zi1").style.display='table-row';
}
if(c == 2){
	document.getElementById("z3_zi2").style.display='table-row';
}
if(c == 3){
	document.getElementById("z3_zi3").style.display='table-row';
}
if(c == 4){
	document.getElementById("z3_zi4").style.display='table-row';
}
if(c == 5){
	document.getElementById("z3_zi5").style.display='table-row';
}
}
}
function getValue1(){
	var objs = document.getElementById("zhu1");
	var val = objs.options[objs.selectedIndex].value;
	if(val==1){
	$("#zhu1_1").show();
	$("#zhu1_2").hide();
	$("#zhu1_3").hide();
}
if(val==2){
	$("#zhu1_2").show();
	$("#zhu1_1").hide();
	$("#zhu1_3").hide();
}
if(val==3){
	$("#zhu1_3").show();
	$("#zhu1_1").hide();
	$("#zhu1_2").hide();
}
if(val==0){
	$("#zhu1_1").hide();
	$("#zhu1_2").hide();
	$("#zhu1_3").hide();
}
}
function getValue2(){
	var objs = document.getElementById("zhu2");
	var val = objs.options[objs.selectedIndex].value;
	if(val==1){
	$("#zhu2_1").show();
	$("#zhu2_2").hide();
	$("#zhu2_3").hide();
}
if(val==2){
	$("#zhu2_2").show();
	$("#zhu2_1").hide();
	$("#zhu2_3").hide();
}
if(val==3){
	$("#zhu2_3").show();
	$("#zhu2_1").hide();
	$("#zhu2_2").hide();
}
if(val==0){
	$("#zhu2_3").hide();
	$("#zhu2_1").hide();
	$("#zhu2_2").hide();
}
}
function getValue3(){
	var objs = document.getElementById("zhu3");
	var val = objs.options[objs.selectedIndex].value;
	if(val==1){
	$("#zhu3_1").show();
	$("#zhu3_2").hide();
	$("#zhu3_3").hide();
}
if(val==2){
	$("#zhu3_2").show();
	$("#zhu3_1").hide();
	$("#zhu3_3").hide();
}
if(val==3){
	$("#zhu3_3").show();
	$("#zhu3_1").hide();
	$("#zhu3_2").hide();
}
if(val==0){
	$("#zhu3_3").hide();
	$("#zhu3_1").hide();
	$("#zhu3_2").hide();
}
}
function getValue11(){
	var objs = document.getElementById("zhu1_zi1");
	var val = objs.options[objs.selectedIndex].value;
	if(val==1){
	$("#zhu1_zi1_1").show();
	$("#zhu1_zi1_2").hide();
	$("#zhu1_zi1_3").hide();
}
if(val==2){
	$("#zhu1_zi1_2").show();
	$("#zhu1_zi1_1").hide();
	$("#zhu1_zi1_3").hide();
}
if(val==3){
	$("#zhu1_zi1_3").show();
	$("#zhu1_zi1_1").hide();
	$("#zhu1_zi1_2").hide();
}
if(val==0){
	$("#zhu1_zi1_3").hide();
	$("#zhu1_zi1_1").hide();
	$("#zhu1_zi1_2").hide();
}
}
function getValue12(){
	var objs = document.getElementById("zhu1_zi2");
	var val = objs.options[objs.selectedIndex].value;
	if(val==1){
	$("#zhu1_zi2_1").show();
	$("#zhu1_zi2_2").hide();
	$("#zhu1_zi2_3").hide();
}
if(val==2){
	$("#zhu1_zi2_2").show();
	$("#zhu1_zi2_1").hide();
	$("#zhu1_zi2_3").hide();
}
if(val==3){
	$("#zhu1_zi2_3").show();
	$("#zhu1_zi2_1").hide();
	$("#zhu1_zi2_2").hide();
}
if(val==0){
	$("#zhu1_zi2_3").hide();
	$("#zhu1_zi2_1").hide();
	$("#zhu1_zi2_2").hide();
}
}
function getValue13(){
	var objs = document.getElementById("zhu1_zi3");
	var val = objs.options[objs.selectedIndex].value;
	if(val==1){
	$("#zhu1_zi3_1").show();
	$("#zhu1_zi3_2").hide();
	$("#zhu1_zi3_3").hide();
}
if(val==2){
	$("#zhu1_zi3_2").show();
	$("#zhu1_zi3_1").hide();
	$("#zhu1_zi3_3").hide();
}
if(val==3){
	$("#zhu1_zi3_3").show();
	$("#zhu1_zi3_1").hide();
	$("#zhu1_zi3_2").hide();
}
if(val==0){
	$("#zhu1_zi3_3").hide();
	$("#zhu1_zi3_1").hide();
	$("#zhu1_zi3_2").hide();
}
}
function getValue14(){
	var objs = document.getElementById("zhu1_zi4");
	var val = objs.options[objs.selectedIndex].value;
	if(val==1){
	$("#zhu1_zi4_1").show();
	$("#zhu1_zi4_2").hide();
	$("#zhu1_zi4_3").hide();
}
if(val==2){
	$("#zhu1_zi4_2").show();
	$("#zhu1_zi4_1").hide();
	$("#zhu1_zi4_3").hide();
}
if(val==3){
	$("#zhu1_zi4_3").show();
	$("#zhu1_zi4_1").hide();
	$("#zhu1_zi4_2").hide();
}
if(val==0){
	$("#zhu1_zi4_3").hide();
	$("#zhu1_zi4_1").hide();
	$("#zhu1_zi4_2").hide();
}
}
function getValue15(){
	var objs = document.getElementById("zhu1_zi5");
	var val = objs.options[objs.selectedIndex].value;
	if(val==1){
	$("#zhu1_zi5_1").show();
	$("#zhu1_zi5_2").hide();
	$("#zhu1_zi5_3").hide();
}
if(val==2){
	$("#zhu1_zi5_2").show();
	$("#zhu1_zi5_1").hide();
	$("#zhu1_zi5_3").hide();
}
if(val==3){
	$("#zhu1_zi5_3").show();
	$("#zhu1_zi5_1").hide();
	$("#zhu1_zi5_2").hide();
}
if(val==0){
	$("#zhu1_zi5_3").hide();
	$("#zhu1_zi5_1").hide();
	$("#zhu1_zi5_2").hide();
}
}
function getValue21(){
	var objs = document.getElementById("zhu2_zi1");
	var val = objs.options[objs.selectedIndex].value;
	if(val==1){
	$("#zhu2_zi1_1").show();
	$("#zhu2_zi1_2").hide();
	$("#zhu2_zi1_3").hide();
}
if(val==2){
	$("#zhu2_zi1_2").show();
	$("#zhu2_zi1_1").hide();
	$("#zhu2_zi1_3").hide();
}
if(val==3){
	$("#zhu2_zi1_3").show();
	$("#zhu2_zi1_1").hide();
	$("#zhu2_zi1_2").hide();
}
if(val==0){
	$("#zhu2_zi1_3").hide();
	$("#zhu2_zi1_1").hide();
	$("#zhu2_zi1_2").hide();
}
}
function getValue22(){
	var objs = document.getElementById("zhu2_zi2");
	var val = objs.options[objs.selectedIndex].value;
	if(val==1){
	$("#zhu2_zi2_1").show();
	$("#zhu2_zi2_2").hide();
	$("#zhu2_zi2_3").hide();
}
if(val==2){
	$("#zhu2_zi2_2").show();
	$("#zhu2_zi2_1").hide();
	$("#zhu2_zi2_3").hide();
}
if(val==3){
	$("#zhu2_zi2_3").show();
	$("#zhu2_zi2_1").hide();
	$("#zhu2_zi2_2").hide();
}
if(val==0){
	$("#zhu2_zi2_3").hide();
	$("#zhu2_zi2_1").hide();
	$("#zhu2_zi2_2").hide();
}
}
function getValue23(){
	var objs = document.getElementById("zhu2_zi3");
	var val = objs.options[objs.selectedIndex].value;
	if(val==1){
	$("#zhu2_zi3_1").show();
	$("#zhu2_zi3_2").hide();
	$("#zhu2_zi3_3").hide();
}
if(val==2){
	$("#zhu2_zi3_2").show();
	$("#zhu2_zi3_1").hide();
	$("#zhu2_zi3_3").hide();
}
if(val==3){
	$("#zhu2_zi3_3").show();
	$("#zhu2_zi3_1").hide();
	$("#zhu2_zi3_2").hide();
}
if(val==0){
	$("#zhu2_zi3_3").hide();
	$("#zhu2_zi3_1").hide();
	$("#zhu2_zi3_2").hide();
}
}
function getValue24(){
	var objs = document.getElementById("zhu2_zi4");
	var val = objs.options[objs.selectedIndex].value;
	if(val==1){
	$("#zhu2_zi4_1").show();
	$("#zhu2_zi4_2").hide();
	$("#zhu2_zi4_3").hide();
}
if(val==2){
	$("#zhu2_zi4_2").show();
	$("#zhu2_zi4_1").hide();
	$("#zhu2_zi4_3").hide();
}
if(val==3){
	$("#zhu2_zi4_3").show();
	$("#zhu2_zi4_1").hide();
	$("#zhu2_zi4_2").hide();
}
if(val==0){
	$("#zhu2_zi4_3").hide();
	$("#zhu2_zi4_1").hide();
	$("#zhu2_zi4_2").hide();
}
}
function getValue25(){
	var objs = document.getElementById("zhu2_zi5");
	var val = objs.options[objs.selectedIndex].value;
	if(val==1){
	$("#zhu2_zi5_1").show();
	$("#zhu2_zi5_2").hide();
	$("#zhu2_zi5_3").hide();
}
if(val==2){
	$("#zhu2_zi5_2").show();
	$("#zhu2_zi5_1").hide();
	$("#zhu2_zi5_3").hide();
}
if(val==3){
	$("#zhu2_zi5_3").show();
	$("#zhu2_zi5_1").hide();
	$("#zhu2_zi5_2").hide();
}
if(val==0){
	$("#zhu2_zi5_3").hide();
	$("#zhu2_zi5_1").hide();
	$("#zhu2_zi5_2").hide();
}
}
function getValue31(){
	var objs = document.getElementById("zhu3_zi1");
	var val = objs.options[objs.selectedIndex].value;
	if(val==1){
	$("#zhu3_zi1_1").show();
	$("#zhu3_zi1_2").hide();
	$("#zhu3_zi1_3").hide();
}
if(val==2){
	$("#zhu3_zi1_2").show();
	$("#zhu3_zi1_1").hide();
	$("#zhu3_zi1_3").hide();
}
if(val==3){
	$("#zhu3_zi1_3").show();
	$("#zhu3_zi1_1").hide();
	$("#zhu3_zi1_2").hide();
}
if(val==0){
	$("#zhu3_zi1_3").hide();
	$("#zhu3_zi1_1").hide();
	$("#zhu3_zi1_2").hide();
}
}
function getValue32(){
	var objs = document.getElementById("zhu3_zi2");
	var val = objs.options[objs.selectedIndex].value;
	if(val==1){
	$("#zhu3_zi2_1").show();
	$("#zhu3_zi2_2").hide();
	$("#zhu3_zi2_3").hide();
}
if(val==2){
	$("#zhu3_zi2_2").show();
	$("#zhu3_zi2_1").hide();
	$("#zhu3_zi2_3").hide();
}
if(val==3){
	$("#zhu3_zi2_3").show();
	$("#zhu3_zi2_1").hide();
	$("#zhu3_zi2_2").hide();
}
if(val==0){
	$("#zhu3_zi2_3").hide();
	$("#zhu3_zi2_1").hide();
	$("#zhu3_zi2_2").hide();
}
}
function getValue33(){
	var objs = document.getElementById("zhu3_zi3");
	var val = objs.options[objs.selectedIndex].value;
	if(val==1){
	$("#zhu3_zi3_1").show();
	$("#zhu3_zi3_2").hide();
	$("#zhu3_zi3_3").hide();
}
if(val==2){
	$("#zhu3_zi3_2").show();
	$("#zhu3_zi3_1").hide();
	$("#zhu3_zi3_3").hide();
}
if(val==3){
	$("#zhu3_zi3_3").show();
	$("#zhu3_zi3_1").hide();
	$("#zhu3_zi3_2").hide();
}
if(val==0){
	$("#zhu3_zi3_3").hide();
	$("#zhu3_zi3_1").hide();
	$("#zhu3_zi3_2").hide();
}
}
function getValue34(){
	var objs = document.getElementById("zhu3_zi4");
	var val = objs.options[objs.selectedIndex].value;
	if(val==1){
	$("#zhu3_zi4_1").show();
	$("#zhu3_zi4_2").hide();
	$("#zhu3_zi4_3").hide();
}
if(val==2){
	$("#zhu3_zi4_2").show();
	$("#zhu3_zi4_1").hide();
	$("#zhu3_zi4_3").hide();
}
if(val==3){
	$("#zhu3_zi4_3").show();
	$("#zhu3_zi4_1").hide();
	$("#zhu3_zi4_2").hide();
}
if(val==0){
	$("#zhu3_zi4_3").hide();
	$("#zhu3_zi4_1").hide();
	$("#zhu3_zi4_2").hide();
}
}
function getValue35(){
	var objs = document.getElementById("zhu3_zi5");
	var val = objs.options[objs.selectedIndex].value;
	if(val==1){
	$("#zhu3_zi5_1").show();
	$("#zhu3_zi5_2").hide();
	$("#zhu3_zi5_3").hide();
}
if(val==2){
	$("#zhu3_zi5_2").show();
	$("#zhu3_zi5_1").hide();
	$("#zhu3_zi5_3").hide();
}
if(val==3){
	$("#zhu3_zi5_3").show();
	$("#zhu3_zi5_1").hide();
	$("#zhu3_zi5_2").hide();
}
if(val==0){
	$("#zhu3_zi5_3").hide();
	$("#zhu3_zi5_1").hide();
	$("#zhu3_zi5_2").hide();
}
}

CSS代码(style.css):

html,body,p,h1,h2,h3,h4,h5,h6,form,input,textarea,select,button,fieldset,legend,img,ul,ol,li,dl,dt,dd,th,td,pre,blockquote{margin:0;padding:0}
html{height:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
body{background:#FFF;color:#000;}
body,button,input,select,textarea,h2,h3,h4,h5,h6{font:14px 'Hiragino Sans GB','Microsoft Yahei','微软雅黑','宋体',\5b8b\4f53,Tahoma,Arial}
img,fieldset{border:0;vertical-align:middle}
input{padding:0;margin:0;outline:none;}
a{text-decoration:none;color:#4c4c4c;}
a:hover{text-decoration:none;}
ul,li,ol{list-style:none}
img{max-width:100%;}
.clear{clear:both;height:0;line-height:0;font-size:0;visibility:hidden;overflow:hidden}
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;zoom:1;}
.l{float:left;}
.r{float:right;}
/*reset样式重置*/
.menwrap{position:fixed;right:0;bottom:0;width:100%;height:50px;z-index:4;}
/*.btn-open-close{margin-top:5px;margin-right:5px;float:right;width:40px;height:40px;line-height:50px;border-radius:20px;-webkit-border-radius:20px;background:#000 url(ex11.png) no-repeat center center;background-size:20px 20px;opacity:0.5;box-sizing:border-box;-webkit-box-sizing:border-box;}
*/
.expan3{width:50px;height:50px;margin-top:0;margin-right:0;border-radius:0;-webkit-border-radius:0;opacity:1;border-top:1px solid #b3b3b3;border-left:1px solid #b3b3b3;background:#e6e6e6;box-sizing:border-box;-webkit-box-sizing:border-box;}
/*.expan4{width:40px;height:40px;margin-left:4px;margin-top:4px;background:#000 url(ex11.png) no-repeat center center;background-size:20px 20px;border-radius:20px;-webkit-border-radius:20px;opacity:0.5;display:none;}
*/
.btn4{position:relative;z-index:3;bottom:0;border-top:1px solid #b3b3b3;background:#e6e6e6;text-align:center;box-sizing:border-box;-webkit-box-sizing:border-box;display:block;}
.menu{position:relative;float:left;width:25%;height:50px;line-height:40px;background:#e6e6e6;border-right:1px solid #b3b3b3;box-sizing:border-box;-webkit-box-sizing:border-box;}
.menu:last-child{border-right:none;}
.new-sub{position:absolute;bottom:50px;z-index:-1;width:100%;box-sizing:border-box;-webkit-box-sizing:border-box;display:none;}
.new-sub li{background:#e6e6e6;float:none;box-sizing:border-box;-webkit-box-sizing:border-box;border-bottom:1px solid #b3b3b3;border-top:1px solid #f2f2f2;}
.new-sub li a{display:block;height:50px;line-height:50px;text-align:left;background:#e6e6e6;color:#333;border:none;text-align:center;font-size:16px;}
.btn-fullbg{width:100%;height:100%;background:rgba(0,0,0,.2);position:fixed;top:0;left:0;z-index:2;display:none;}
.sanjiao{position:absolute;bottom:5px;right:5px;width:0;height:0;border:5px solid transparent;border-right:5px solid #000;border-bottom:5px solid #000;opacity:.5;}
.bt-name{font-size:16px;color:#000;}
.bt-name a{display:block;font-size:16px;color:#000;}

附件:下载该文件资源,减少时间成本(增值服务)