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

js页面渲染和动态的展开、收起功能

页面渲染

添加展开、收起功能

猜你喜欢