JS仿QQ好友列表展开、收缩功能(第一篇)

下面我将详细讲解 “JS仿QQ好友列表展开、收缩功能(第一篇)” 的完整攻略。

简介

本篇文章主要是介绍如何使用 JavaScript 编写一个仿 QQ 好友列表的展开、收缩功能，实现点击好友分组，可以收缩或展开该分组中的好友。

HTML结构

我们先来看一下需要实现的 HTML 结构：

<div class="friend-list">
  <div class="friend-group">
    <div class="group-title">我的好友</div>
    <ul class="friend-items">
      <li class="friend-item">友1</li>
      <li class="friend-item">友2</li>
      <li class="friend-item">友3</li>
      <li class="friend-item">友4</li>
    </ul>
  </div>
  <div class="friend-group">
    <div class="group-title">家人</div>
    <ul class="friend-items">
      <li class="friend-item">父亲</li>
      <li class="friend-item">母亲</li>
      <li class="friend-item">兄弟</li>
      <li class="friend-item">姐妹</li>
    </ul>
  </div>
</div>

CSS样式

为了美观，我们需要对 HTML 结构进行一些样式上的调整。这里仅列出关键代码：

.friend-group .group-title {
  cursor: pointer;
}
.friend-items {
  display: none;
}
.friend-items.show {
  display: block;
}

JavaScript代码

我们主要通过 JavaScript，实现好友分组的展开与收缩。先贴出完整的 JavaScript 代码：

var groups = document.querySelectorAll('.friend-group');  // 获取所有好友分组

for (var i = 0; i < groups.length; i++) {
  var group = groups[i];
  var title = group.querySelector('.group-title');    // 当前分组的标题
  title.onclick = function() {  // 点击标题时切换分组的展开状态
    var items = this.parentNode.querySelector('.friend-items');  // 当前分组所有的好友列表
    if (items.classList.contains('show')) {
      items.classList.remove('show');
    } else {
      items.classList.add('show');
    }
  }
}

我们需要做的是，获取所有好友分组，并且为每个分组的标题添加一个点击事件。当点击标题时，我们需要切换分组的展开状态。

先获取当前分组下所有的好友列表，再判断好友列表是否已经展开。如果已经展开，我们需要将其设置为隐藏状态；否则，我们将其设置为显示状态。

示例说明

下面，我们来看两个示例说明，以便更好地理解实现过程。

示例一

那么，我们该如何实现“我的好友”分组的默认展开呢？我们可以在 JavaScript 代码中，手动为“我的好友”分组添加一个 .show 样式，代码如下：

var groups = document.querySelectorAll('.friend-group');  // 获取所有好友分组

for (var i = 0; i < groups.length; i++) {
  var group = groups[i];
  var title = group.querySelector('.group-title');    // 当前分组的标题
  var items = group.querySelector('.friend-items');    // 当前分组所有的好友列表
  if (title.innerHTML === '我的好友') {    // 手动为“我的好友”分组添加.show样式
    items.classList.add('show');
  }
  title.onclick = function() {  // 点击标题时切换分组的展开状态
    var items = this.parentNode.querySelector('.friend-items');  // 当前分组所有的好友列表
    if (items.classList.contains('show')) {
      items.classList.remove('show');
    } else {
      items.classList.add('show');
    }
  }
}

示例二

假设我们现在需要将展开、收缩的效果修改为向上、向下滑动的效果。解决方法很简单：只需将原来的 display:none 改为使用 height: 0、overflow: hidden；将原来的 display:block 改为使用 height: auto，代码如下：

.friend-items {
  height: 0;
  overflow: hidden;
}
.friend-items.show {
  height: auto;
}

至此，本篇文章的代码实现过程就介绍完了。该完整攻略可以通过表格形式或者图解的形式呈现出来，但是本示例将文字和代码结合，帮助大家更好地理解实现过程。