[JavaScript知识库] js页面渲染和动态的展开、收起功能

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> js页面渲染和动态的展开、收起功能 -> 正文阅读

[JavaScript知识库]js页面渲染和动态的展开、收起功能

以下来自优课达，是我学习的笔记，有问题欢迎探讨

页面渲染

如果要做样式一样的十张名片。写十遍HTML和CSS是一件麻烦的事情，这里我们将核心代码作为模板，使用某种技术替换标签中的文字

定义字符串模板

let innerHtml = `<div class="name">焦哥</div>
      <div class="introudce">
        前阿里资深专家(P9)、垂直开放业务负责人阿里B2B首席架构师
      </div>
      <div class="detail">
        优课达创始人，前最年轻阿里P9，B2B事业部首席架构师，曾主导阿里巴巴中文站建站，打造电商云新型B类生态，曾主导建立了阿里首个全栈开发团队，为阿里培养了一大批中高端技术人才
      </div>`;

下面是替换标签中的文字，可以用${}替换

let innerHtml = `<div class="name">${}</div>
      <div class="introudce">
        ${}
      </div>
      <div class="detail">
        ${}
      </div>`;

接下来是定义数据

// 定义数据
let data = {
  name: '焦哥',
  introudce: '前阿里资深专家(P9)、垂直开放业务负责人阿里B2B首席架构师',
  detail:
    '优课达创始人，前最年轻阿里P9，B2B事业部首席架构师，曾主导阿里巴巴中文站建站，打造电商云新型B类生态，曾主导建立了阿里首个全栈开发团队，为阿里培养了一大批中高端技术人才',
};

最后是使用DOM操作将模板字符串添加到页面中

// 定义数据
let data = {
  name: '焦哥',
  introudce: '前阿里资深专家(P9)、垂直开放业务负责人阿里B2B首席架构师',
  detail:
    '优课达创始人，前最年轻阿里P9，B2B事业部首席架构师，曾主导阿里巴巴中文站建站，打造电商云新型B类生态，曾主导建立了阿里首个全栈开发团队，为阿里培养了一大批中高端技术人才',
};
// 将html代码中的核心代码写成模板字符串
let innerHtml = `<div class="name">${data.name}</div>
      <div class="introudce">
        ${data.introudce}
      </div>
      <div class="detail">
        ${data.detail}
      </div>`;
// 获取模板代码要填充的父盒子,在HTML里，这些的父盒子就是.box
let box = document.querySelector('.box');
// 将模板字符串填充到父盒子中
box.innerHTML = innerHtml;

用这样的办法，写完所有人的信息之后，我们把它们填到模板字符串中，既然模板字符串只能接受对象.的形式去填充数据，那么我们需要把对象遍历出来

for (let i = 0; i < cardList.length; i++) {
  let data = cardList[i];
}

现在每一个data就是字符串中需要的对象，那么剩下的就是把上面的模板字符串渲染的代码扔到循环体内

for (let i = 0; i < cardList.length; i++) {
  let data = cardList[i];
  // 将html代码中的核心代码写成模板字符串
  let innerHtml = `<div class="name">${data.name}</div>
      <div class="introudce">
        ${data.introudce}
      </div>
      <div class="detail">
        ${data.detail}
      </div>`;
  // 获取模板代码要填充的父盒子
  let box = document.querySelector('.box');
  // 将模板字符串填充到父盒子中
  box.innerHTML = innerHtml;
}

添加展开、收起功能

分析思路：

修改list标签的display属性为none，初始状态讲这个标签隐藏
添加新的类名 list-block类名，属性为display:block;,作为点击后可以显示list标签的类名
给title标签添加点击事件，在点击的时候修改类名，实现list标签的显示和隐藏

修改后的list标签的样式

.list {
  /* 添加display属性 */
  display: none;
  width: rem(335);
  padding: rem(20);
  margin-top: rem(-5);
  font-size: rem(14);
  line-height: rem(20);
  color: #ffffff;
  background: #2c3744;
  border-radius: rem(4);
}
/* 添加list-block类名 */
.list-block {
  display: block;
}

点击展开

// 获取被点击目标
let titleElement = document.querySelector('.card-list .card .title');
// 获取操作对象
let listElement = document.querySelector('.card-list .card .list');
// 给目标标签添加点击事件
titleElement.addEventListener('click', function () {
  listElement.classList.add('list-block');
});

点击闭合

如何让展开的list标签收起来呢，需要做一个判断，是展开还是闭合的

其实展开与闭合决定权在于list的标签有没有list-block类名，所以我们可以用contains 函数去做判断，该函数接受一个类名，返回一个布尔值

// 获取被点击目标
let titleElement = document.querySelector('.card-list .card .title');
// 获取操作对象
let listElement = document.querySelector('.card-list .card .list');
// 给目标标签添加点击事件
titleElement.addEventListener('click', function () {
  // 如果包含"list-block"类名，表示list标签是展开的
  if (listElement.classList.contains('list-block')) {
    listElement.classList.remove('list-block');
  } else {
    listElement.classList.add('list-block');
  }
});