js实现导航菜单展开/收缩过程中，点击同一个按钮，第二次无法展开

功能描述：目前需要实现一个垂直二级导航栏，即点击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>

if((last_menu_id != "") && (last_menu_id != id)){

是 last_menu_id != id

不是 menu_id != id

最后一句放到 if 的里面

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

		

      }

<!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>Document</title>
    <script src="./index.js"></script>
</head>
<body>
    <div id="nav" class="nav">
        <div class="father">导航一</div>
        <div class="child">
            <div>导航一的内容</div>
            <div>导航一的内容</div>
            <div>导航一的内容</div>
        </div>
        <div class="father">导航二</div>
        <div class="child">
            <div>导航二的内容</div>
            <div>导航二的内容</div>   
        </div>
        <div class="father">导航三</div>
        <div class="child">
            <div>导航三的内容</div>
            <div>导航三的内容</div>
        </div>
        <div class="father">导航四</div>
        <div class="child">
            <div>导航四的内容</div>
            <div>导航四的内容</div>
            <div>导航四的内容</div>
        </div>
        <div class="father">导航五</div>
        <div class="child">
            <div>导航五的内容</div>
            <div>导航五的内容</div>
            <div>导航五的内容</div>
        </div>
    </div>
</body>
<script>
    var nav = document.getElementById('nav');
    var father = nav.getElementsByClassName('father');
    var child = nav.getElementsByClassName('child');
    for (let i = 0; i < father.length; i++) {
        console.log('1');
        father[i].addEventListener('click',function() {
            console.log('2');
            for (let j = 0; j < father.length; j++) {
                child[j].style.maxHeight = 0 + 'px';
            }
            child[i].style.maxHeight = 200 + 'px';
        })
    }
</script>
</html>
<style>
    .nav {
        width: 200px;
        height: 100vh;
        border: 1px solid #999;
    }
    .father {
        margin-bottom: 5px;
        background-color: #999;
        text-align: center;
    }
    .child {
        background-color: aquamarine;
        overflow: hidden;
        max-height: 0px;
        transition:  1s;
    }
</style>

如果有帮到你，请采纳

您好，我是问答小助手，你的问题已经有小伙伴为您解答了问题，您看下是否解决了您的问题，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月有问必答服务，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632