javaScript实现导航的折叠和弹出功能小结

半斗烟草

已于 2022-02-07 20:13:57 修改

阅读量1.6k

点赞数

分类专栏： python web 文章标签： css javascript html html5

于 2021-03-27 10:58:28 首次发布

本文链接：https://blog.csdn.net/qq_40494873/article/details/115261642

版权

python web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、功能介绍

JS实现垂直导航栏的折叠和弹出，实现功能如下：
同一个导航可以反复折叠与弹出
在这里插入图片描述
同一个导航不可以反复折叠与弹出

二、实现方式

1.两种思路

本次鼠标点击某一级导航，展开该一级导航下的二级导航，然后关闭上一次的二级导航
鼠标点击某一级导航，先通过遍历关闭所有的二级导航，然后打开当前一级导航下的二级导航

2.两种实现方式

通过CSS样式属性，display=none（折叠）/dispaly=block（展开）实现二级导航的折叠与弹出；
通过块状元素的高度：height:0px/200px; maxHeight来实现二级导航的折叠与弹出；

3.源码如下

第一种思路源码：

<!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</title>
    <style>
      ul{
         padding: 200px 300px;
         font-size: 32px;
      }
      li{
        padding-top: 20px;
      }
      .div_show{
         width: 200px;
         height:100px;
         /* display: none; */
         background-color: aquamarine;
      }
      .div_hide{
        display: none;
      }
    </style>
</head>
<body>
   <ul>
      <li>
        <a href="#" onclick="click_menu('div_1')">
          <img src="img/tip/chevron-right.svg">第一个目录</img>
        </a>
        <div class="div_hide" id="div_1"></div>
      </li>
      <li>
        <a href="#" onclick="click_menu('div_2')">
          <img src="img/tip/chevron-right.svg">第二个目录</img>
        </a>
        <div class="div_hide" id="div_2"></div>
      </li>
      <li>
        <a href="#" onclick="click_menu('div_3')">
          <img src="img/tip/chevron-right.svg">第三个目录</img>
        </a>
        <div class="div_hide" id="div_3"></div>
      </li>
   </ul>
</body>
<script>

var last_menu_id = "";

function click_menu(id){
      var menu_id = document.getElementById(id); 
      var img_div = menu_id.parentElement.firstElementChild.firstElementChild;

      if (menu_id.className == "div_hide"){
        menu_id.className = "div_show";
        //当div展开之后，将图标改成向下
        img_div.setAttribute("src", "img/tip/chevron-down.svg"); 
      }else{
        menu_id.className = "div_hide";
        //当div收缩之后，将图标改成向右
        img_div.setAttribute("src", "img/tip/chevron-right.svg");
      }
      console.log("before last_menu_id is:")
      console.log(last_menu_id)
      //写一个逻辑，关闭其他div
      if((last_menu_id != "") && (last_menu_id != id)){
        var last_id = document.getElementById(last_menu_id);
        last_id.className = "div_hide"; //收缩上次的DIV
        //当div收缩之后，将图标改成向右
        var last_img_div = last_id.parentElement.firstElementChild.firstElementChild;
        last_img_div.setAttribute("src", "img/tip/chevron-right.svg");
      }
      last_menu_id = id; //存储上一次的menu_id
      console.log("after last_menu_id is:")
      console.log(last_menu_id)
    }

</script>
</html>

第二种思路源码：

<!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</title>
    <style>
      ul{
         padding: 200px 300px;
         font-size: 32px;
      }
      li{
        padding-top: 20px;
      }
      .child{
         width: 200px;
         background-color: aquamarine;
      }

    </style>
</head>
<body>
   <ul>
      <li>
        <a href="#" class="father">第一个目录</a>
        <div class="child"></div>
      </li>
      <li>
        <a href="#" class="father">第二个目录</a>
        <div class="child"></div>
      </li>
      <li>
        <a href="#" class="father"> 第三个目录</a>
        <div class="child"></div>
      </li>
   </ul>
</body>
<script>
    var father_list = document.getElementsByClassName("father");
    var child_list = document.getElementsByClassName("child");
    for(let i=0; i<father_list.length; i++){
        father_list[i].addEventListener('click', function(event){
          for(let j=0; j<child_list.length; j++){
            //child_list[j].style.maxHeight = 0+"px";//假如有内容的话，可以使用maxHeight，能够跟随内容高度自适应
            child_list[j].style.height = 0+"px"; 
          }
          console.log(child_list[i]);
          //child_list[i].style.maxHeight = 200+"px";//假如有内容的话，可以使用maxHeight，能够跟随内容高度自适应
          child_list[i].style.height = 200+"px";
        },false)
    }
</script>
</html>

#第二种思路参考enkongkong提供的方法： https://ask.csdn.net/questions/7410157?expend=true

半斗烟草

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
javaScript实现导航的折叠和弹出功能小结

一、功能介绍JS实现垂直导航栏的折叠和弹出，实现功能如下：同一个导航可以反复折叠与弹出同一个导航不可以反复折叠与弹出二、实现方式1.两种思路本次鼠标点击某一级导航，展开该一级导航下的二级导航，然后关闭上一次的二级导航鼠标点击某一级导航，先通过遍历关闭所有的二级导航，然后打开当前一级导航下的二级导航2.两种实现方式通过CSS样式属性，display=none（折叠）/dispaly=block（展开）实现二级导航的折叠与弹出；通过块状元素的高度：height:0px/200px;
复制链接

扫一扫

专栏目录