qq_40494873
CIE_CMO
2021-03-25 22:12
采纳率: 100%
浏览 114

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>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • technologist_16
    已采纳

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

    是 last_menu_id != id

    不是 menu_id != id

    点赞 评论
  • qq_15228737
    奋斗的小小鱼 2021-03-25 22:57

    最后一句放到 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
    
    		
    
          }
    点赞 评论
  • Menkongkong
    Menkongkong 2021-03-26 09:15
    <!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>
    点赞 评论
  • Menkongkong
    Menkongkong 2021-03-26 09:18

    如果有帮到你 ,请采纳

    点赞 评论
  • QA_Assistant
    有问必答小助手 2021-03-26 15:10

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

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

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

    点赞 评论

相关推荐