网络知识 娱乐 【JavaScript】用类的操作对CSDN社区管理菜单栏优化

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

发布: 2023年2月14日 10:17:50

文章目录

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

前言

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

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

<button id="bt1">点击按钮修改样式</button>
<div id="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

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

定义一个添加函数

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

//添加class
function 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：

<div class="box">
        <img src="https://csdnimg.cn/release/ccloud/img/ccloud-logo.fdf3c711.png" alt="" class="csdnImg">
        <br>
        <!--  -->
        <p id="suliang"><img src="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>     
        <div class="childDiv">
            <span class="menuList"><img src="../img/用户.png" alt="" align="top"> 用户</span>
            <a href="#">用户管理</a>
            <a href="#">用户配置</a>
        </div>

        <div class="childDiv change">
            <span class="menuList"><img src="../img/内容模型设置.png" alt="" align="top">内容</span>
            <a href="#">内容管理</a>
            <a href="#">内容收录</a>
        </div>

        <div class="childDiv change">
            <span class="menuList"> <img src="../img/137设置、系统设置、功能设置、属性-线.png" alt="" align="top">功能配置</span>
            <a href="#">频道管理</a>
            <a href="#">信息管理</a>
            <a href="#">广告位配置</a>
        </div>

        <div class="childDiv change">
            <span class="menuList"> <img src="../img/管理员.png" alt="" align="top">管理员</span>
            <a href="#">管理员配置</a>
        </div>
 </div>

JS：

//获取span标签
let menuList = document.getElementsByClassName('menuList');
//获取div
let 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;
   })
}

//判断是否含有clsssname
function hasClass(obj,cn){
   let reg = new RegExp("\b" + cn + "\b");
   return reg.test(obj.className);
   // alert(reg);
}

//添加class
function addClass(obj,cn){
   // let reg = new RegExp("\b" + cn + "\b");
   obj.className += ' '+ cn;
}

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

//替换class
function toggleClass(obj,cn){
   if(hasClass(obj,cn)){
       removeClass(obj,cn);
   }else{
       addClass(obj,cn);
   };
}

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

相关文章