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

文章目录

前言

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

//获取按钮和divlet 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：

<buttonid="bt1">点击按钮修改样式</button><divid="box"class="b1"></div>

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

functionhasClass(obj,cn){let reg =newRegExp("\\b"+ cn +"\\b");return reg.test(obj.className);// alert(reg);}

定义一个添加函数

obj - 需要修改的对象
cn - class名

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

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

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

删除样式

定义一个删除函数：

obj - 需要修改的对象
cn - class名

functionremoveClass(obj,cn){let reg =newRegExp("\\b"+ cn +"\\b");
    obj.className = obj.className.replace(reg,"");}

调用删除函数：

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

替换样式

有则删除，无则添加。

定义一个替换函数

obj - 需要修改的对象
cn - class名

functiontoggleClass(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：

<divclass="box"><imgsrc="https://csdnimg.cn/release/ccloud/img/ccloud-logo.fdf3c711.png"alt=""class="csdnImg"><br><!-- <img src="https://img-community.csdnimg.cn/avatar/cbe53133b4e84b59917aefeaeacb6615.jpg?x-oss-process=image/resize,m_fixed,h_88,w_88" alt="" class="webImg"> --><pid="suliang"><imgsrc="https://img-community.csdnimg.cn/avatar/cbe53133b4e84b59917aefeaeacb6615.jpg?x-oss-process=image/resize,m_fixed,h_88,w_88"alt=""class="webImg"align="top">前端修炼社（苏凉）</p><divclass="childDiv"><spanclass="menuList"><imgsrc="../img/用户.png"alt=""align="top"> 用户</span><ahref="#">用户管理</a><ahref="#">用户配置</a></div><divclass="childDiv change"><spanclass="menuList"><imgsrc="../img/内容模型设置.png"alt=""align="top">内容</span><ahref="#">内容管理</a><ahref="#">内容收录</a></div><divclass="childDiv change"><spanclass="menuList"><imgsrc="../img/137设置、系统设置、功能设置、属性-线.png"alt=""align="top">功能配置</span><ahref="#">频道管理</a><ahref="#">信息管理</a><ahref="#">广告位配置</a></div><divclass="childDiv change"><spanclass="menuList"><imgsrc="../img/管理员.png"alt=""align="top">管理员</span><ahref="#">管理员配置</a></div></div>

JS：

//获取span标签let menuList = document.getElementsByClassName('menuList');//获取divlet childDiv = document.getElementsByClassName('childDiv');let open = childDiv[0];// let childDivHeight = childDiv.offsetHeight;// alert(childDivHeight)//给span绑定单击响应函数for(let i=0;i<menuList.length;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;})}//判断是否含有clsssnamefunctionhasClass(obj,cn){let reg =newRegExp("\\b"+ cn +"\\b");return reg.test(obj.className);// alert(reg);}//添加classfunctionaddClass(obj,cn){// let reg = new RegExp("\\b" + cn + "\\b");
   obj.className +=' '+ cn;}//删除classfunctionremoveClass(obj,cn){let reg =newRegExp("\\b"+ cn +"\\b");
   obj.className = obj.className.replace(reg,"");}//替换classfunctiontoggleClass(obj,cn){if(hasClass(obj,cn)){removeClass(obj,cn);}else{addClass(obj,cn);};}

欢迎大家加入我的社区一起讨论：
前端修炼社