• 【JavaScript】用类的操作对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';
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

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

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

    HTML：

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

    • 1
    • 2

    CSS：

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    b1样式：

    在这里插入图片描述
    b2样式：

    在这里插入图片描述

    b1 b2样式：

    在这里插入图片描述

    直接修改类名

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

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

    • 1
    • 2
    • 3

    添加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);
 }

    • 1
    • 2
    • 3
    • 4
    • 5

    定义一个添加函数

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

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

    • 1
    • 2
    • 3
    • 4

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

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

    • 1
    • 2
    • 3
    • 4
    • 5

    删除样式

    定义一个删除函数：

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

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

    • 1
    • 2
    • 3
    • 4

    调用删除函数：

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

    • 1
    • 2
    • 3

    替换样式

    有则删除，无则添加。

    定义一个替换函数

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    调用替换函数

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

    • 1
    • 2
    • 3

    对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;
 }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    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);
   };
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52

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

  • 相关阅读:
    Few-Shot Learning
    Java 默认可变性：“万亿美元级别的错误” | InfoQ 访谈
    1300*D. Alice, Bob and Candies（模拟）
    申请国外博士后的常识
    google登录k8s dashboard ui显示“您的连接不是私密连接”问题解决梳理
    consul系列文章02---替换掉.netcore的配置文件
    二十八、Java 包(package)
    TPAMI 2022 | 金字塔池化的骨干网络，各大任务都涨点！南开&达摩院联合推出P2T
    Apollo 应用与源码分析：Apollo工程概述与AUTOSAR架构
    利用cpolar为群晖NAS建立稳定外网地址（1）
  • 原文地址：https://blog.csdn.net/weixin_46277553/article/details/126083351