【JavaScript】用类的操作对CSDN社区管理菜单栏优化

文章目录

• 前言
• • 直接修改类名
  • 添加b2样式
  • 删除样式
  • 替换样式
  • 对CSDN���区管理菜单栏的优化

    前言

    在此之前，我们对一个元素的样式进行修改，需要对其所有样式逐一更改，如下所示：

    //获取按钮和plet btn = document.getElementById('bt1');let box = document.getElementById('box');//给按钮绑定单击响应函数btn.addEventListener('click',()=>{    // 一项一项修改    box.style.height = 300+'px';    box.style.backgroundColor = "yellow";    box.style.marginTop = 30 + 'px';});

    实际上，当我们使用这种方法时，浏览器会对其样式进行一次又一次的渲染。即渲染多次之后得到最后样式，那么，如何只让浏览器渲染一次就得到该效果呢？下面我们就一起来看看如何操作吧。

    下面是该实例操作的一些样式和html。

    HTML：

    点击按钮修改样式

    CSS：

    .b1{   margin-top: 20px;   background-color: antiquewhite;   width: 150px;   height: 150px;}.b2{   margin-top: 20px;   /* width: 30px; */   height: 300px;   background-color: aqua;}

    b1样式：

    b2样式：

    b1 b2样式：

    直接修改类名

    可直接修改类名，将b1样式修改为b2样式。

    btn.addEventListener('click',()=>{box.className = 'b2';});

    添加b2样式

    这里需要判断className中是否存在b2样式，若不存在则添加。

    判断是否存在

    定义一个函数来判断b2是否存在。

    obj - 需要修改的对象

    cn - class名

    若存在，返回true，反之，返回false

    function hasClass(obj,cn){     let reg = new RegExp("\b" + cn + "\b");     return reg.test(obj.className);     // alert(reg); }

    定义一个添加函数

    obj - 需要修改的对象

    cn - class名

    //添加classfunction addClass(obj,cn){       obj.className += ' '+ cn;   }

    调用添加：若无b2，则添加。

    btn.addEventListener('click',()=>{if(!hasClass(box,'b2')){    addClass(box,'b2');};});

    删除样式

    定义一个删除函数：

    obj - 需要修改的对象

    cn - class名

     function removeClass(obj,cn){    let reg = new RegExp("\b" + cn + "\b");    obj.className = obj.className.replace(reg,"");}

    调用删除函数：

    btn.addEventListener('click',()=>{removeClass(box,'b2');});

    替换样式

    有则删除，无则添加。

    定义一个替换函数

    obj - 需要修改的对象

    cn - class名

    function toggleClass(obj,cn){if(hasClass(obj,cn)){          removeClass(obj,cn);      }else{          addClass(obj,cn);      };  }

    调用替换函数

    btn.addEventListener('click',()=>{toggleClass(box,'b2');            });

    对CSDN社区管理菜单栏的优化

    前一阵听到有大佬反馈csdn社区管理的菜单栏的问题，让我们先看看怎么个事儿

    首先这是csdn社区管理的菜单栏：

    存在的问题就是，对于屏幕较小的用户将所有菜单展开后，不能向下滚动。例如将所有菜单打开之后，管理员那栏就被隐藏了，需要再次将其他菜单栏关闭才能够显示。

    优化方案：

    打开下一个菜单栏立即关闭上一个菜单栏。

    如图：

    CSS：

    .box{     width: 256px;     height: 760px;     background-color: #515a6e;     text-align: center; } .csdnImg{     /* position: relative; */     height: 40px;     width: 150px;     line-height: 32px;      } .webImg{     width: 24px;     height: 24px;     margin-right: 8px;     border-radius: 2px;      } #suliang{     display: inline-block;     height: 24px;     text-align: center;     font-size: 20px;     color: #fff;     font-weight: 500;     white-space: nowrap;     line-height: 100%;     /* background-color: antiquewhite; */     cursor: pointer; } .childDiv{     display: flex;     flex-direction: column;     align-items: center;     overflow: hidden;     width: 256px;     position: relative;     margin-bottom: 5px;     box-sizing: border-box;     transition:all 0.5s;     height: 170px;  } .menuList{     border: 2px gray solid;     width: 230px;     border-radius: 10px;     padding: 14px 24px;     /* position: absolute; */     cursor: pointer;     height: 52px;     box-sizing: border-box;     text-align:justify; } .menuList>img{     width: 20px;     height: 20px;     /* align:top; */     margin-right: 5px; } .menuList:hover{     color: #fff;     transition: 0.4s; } a{     text-decoration: none;     color: #191a23;     margin: 10px; } a:hover{     color: #fff;     transition: 0.4s; } .change{     height: 52px;     transition: 0.6s; }

    HTML：

            
    前端修炼社（苏凉）
                              用户            用户管理            用户配置                            内容            内容管理            内容收录                             功能配置            频道管理            信息管理            广告位配置                             管理员            管理员配置         

    JS：

    //获取span标签let menuList = document.getElementsByClassName('menuList');//获取plet childDiv = document.getElementsByClassName('childDiv');let open = childDiv[0];// let childDivHeight = childDiv.offsetHeight;// alert(childDivHeight)//给span绑定单击响应函数for(let i=0;i   menuList[i].addEventListener('click',function(){       // alert('11')       let parentDiv = this.parentNode;       // alert(parentDiv.offsetHeight)       toggleClass(parentDiv,'change')       if(parentDiv != open && !hasClass(open,'change')){           toggleClass(open,'change')       };       open = parentDiv;   })}//判断是否含有clsssnamefunction hasClass(obj,cn){   let reg = new RegExp("\b" + cn + "\b");   return reg.test(obj.className);   // alert(reg);}//添加classfunction addClass(obj,cn){   // let reg = new RegExp("\b" + cn + "\b");   obj.className += ' '+ cn;}//删除classfunction removeClass(obj,cn){   let reg = new RegExp("\b" + cn + "\b");   obj.className = obj.className.replace(reg,"");}//替换classfunction toggleClass(obj,cn){   if(hasClass(obj,cn)){       removeClass(obj,cn);   }else{       addClass(obj,cn);   };}