期望效果：点击一个菜单，会显示选中的效果（背景变灰色，文字变红色），点击有子菜单的选项，子菜单会下拉显示，再点一下这个选项，子菜单收回（必须再点击同一个父选项才会收回）。
现有问题：选中效果已经出来，但在子菜单下拉后，点击列表中的任意选项都会使子菜单收回。
被要求的实现方式：通过控制高度(height)，设置其为0或不为0来控制子菜单的显示，通过transition:height 1s来控制下拉效果。
附上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.2.1.js" type="text/javascript"></script>
<style type="text/css">
.nav_bg {
height: 42px;
border-bottom: 1px solid;
}
.nav_submenu {
height: 24px;
border-bottom: 1px solid;
}
.nav_bg_gray {
background-color: gray;
}
.nav_sub {
overflow: hidden;
height: 0;
transition: height 1s;
}
</style>
</head>
<body>
<div id="menulist">
<div class="nav_bg" id="nav_bg_1" onclick="loacalPage()">
<a><span>单位审核</span></a>
</div>
<div class="nav_bg" id="nav_bg_2" onclick="loacalPage()">
<a><span>未读事项</span></a>
</div>
<div class="nav_bg" id="nav_bg_3" onclick="loacalPage()">
<a><span>我的工作</span></a>
</div>
<!--原本nav_submenu和nav_bg是同级，现添加一个div——nav_sub将他们包裹起来-->
<div class="nav_sub" id="nav_bg_4">
<div class="nav_submenu" onclick="loacalPage()">
<a><span> 已完成</span></a>
</div>
<div class="nav_submenu" onclick="loacalPage()">
<a><span> 未完成</span></a>
</div>
</div>
<div class="nav_bg" id="nav_bg_5" onclick="loacalPage()">
<a><span>督办事项</span></a>
</div>
<div class="nav_bg" id="nav_bg_6" onclick="loacalPage()">
<a><span>测试</span></a>
</div>
<div class="nav_sub" id="nav_bg_7">
<div class="nav_submenu" onclick="loacalPage()">
<a><span> 测试1</span></a>
</div>
<div class="nav_submenu" onclick="loacalPage()">
<a><span> 测试2</span></a>
</div>
</div>
</div>
</body>
<script>
$(function() {
loacalPage();
});
function loacalPage() {
changemenucolor();
dropdown();
}
//该方法用于添加一个功能———点击“我的工作”或“测试”两项时，下面的子div隐藏，再次点击时则
//显示
function dropdown() {
$("#nav_bg_3").on("click", function() {
var subdiv = $("#nav_bg_4").find("div");
var h = 0;
subdiv.each(function() {
h += $(this).outerHeight();//获得每个子div的高度，包括边框
});
var val = $("#nav_bg_4").height();
if(val != 0) {
$("#nav_bg_4").height(0);
} else {
$("#nav_bg_4").height(h);
}
});
$("#nav_bg_6").on("click", function() {
var subdiv = $("#nav_bg_7").find("div");
var h = 0;
subdiv.each(function() {
h += $(this).outerHeight();//获得每个子div的高度，包括边框
});
var val = $("#nav_bg_7").height();
if(val != 0) {
$("#nav_bg_7").height(0);
} else {
$("#nav_bg_7").height(h);
}
});
}
//该方法使用了each进行循环，点击menudiv下的每一个div时，将点击的div样式改为灰底红字
//其他地方的样式改为白底默认字体
function changemenucolor() {
$("#menulist div").click(function() {
var menudiv = $("#menulist").find("div");
var thisclass = $(this).attr("class");
//添加该if条件进行判断，防止因多次重复进入each循环中而导致的nav_submenu无样式
if(thisclass != 'nav_sub') {
menudiv.each(function() {
$(this).find('a').attr("style", "");
if($(this).attr("class") != 'nav_submenu') {
if($(this).attr("class") != 'nav_sub') {
$(this).attr("class", "nav_bg");
} else {
$(this).attr("style", "background-color:#fff;");
}
} else {
$(this).attr("style", "background-color:#fff;");
}
});
}
$(this).find('a').attr("style", "color:#B50B14;font-weight:bold");
if($(this).attr("class") != 'nav_submenu') {
if($(this).attr("class") != 'nav_sub') {
$(this).addClass("nav_bg_gray");
} else {
$(this).attr("style", "background-color:gray;");
}
} else {
$(this).attr("style", "background-color:gray;");
}
});
}
</script>
</html>
