功能描述：目前需要实现一个垂直二级导航栏，即点击A，A的二级导航 A_div展开，此时点击B，展开B_div，然后关闭A_div；
问题描述：上面的功能已经实现，但是第一次点击A，展开收缩A_div没问题；再次点击A，发现无法展开A_div；打开调试之后，发现第二次无论怎么尝试都无法将display属性改为block。
尝试方法：
第一步：添加log，查看判断逻辑，发现每次都能正确进入条件语句块，但是都是无法修改dispaly的属性。
第二步：问题定位出现在 修改display属性的这个语句；
第一种写法，修改属性，----》失败
第二种写法：然后切换思路，将dispaly属性删除与添加来实现展开与收缩。 ----》失败
第三种写法：基于第一种方法，将display属性分离到css选择中，通过 cssName去实现展开与收缩 ----》失败
由于正式项目在黄区，属于保密代码，自己回家把这部分逻辑提取出来写了一个Demo，忘各位前辈帮忙解惑，不胜感激！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo_test</title>
<style>
ul{
padding: 200px 300px;
font-size: 32px;
}
li{
padding-top: 20px;
}
.div_show{
width: 200px;
height:100px;
/* display: none; */
background-color: aquamarine;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#" id="a_1" onclick="click_menu('a_1')">项目信息</a>
<div class="div_show" style="display: none;"></div>
</li>
<li>
<a href="#" id="a_2" onclick="click_menu('a_2')">产品信息</a>
<div class="div_show" style="display: none;"></div>
</li>
<li>
<a href="#" id="a_3" onclick="click_menu('a_3')">版本信息</a>
<div class="div_show" style="display: none;"></div>
</li>
</ul>
</body>
<script>
var last_menu_id = "";
function click_menu(id){
var menu_id = document.getElementById(id);
var div = menu_id.parentElement.lastElementChild; //获取父节点在获取最后一个子节点
if (div.style.display == "none"){
div.style.display = "block";
}else{
div.style.display = "none";
}
//关闭上一次展开的div
if((last_menu_id != "") && (menu_id != id)){
var last_id = document.getElementById(last_menu_id);
last_id.parentElement.lastElementChild.style.display = "none"; //收缩上次的DIV
}
last_menu_id = id; //存储上一次的menu_id
}
</script>
</html>
