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

JS仿QQ好友列表展开、收缩功能(第二篇) 完整攻略

1. 概述

本文将详细介绍如何使用 JavaScript 实现仿 QQ 好友列表的展开和收缩功能。通过这个功能，用户可以方便地展开或收缩好友分组，增强用户体验。

2. 实现步骤

2.1 HTML 结构

首先，我们需要构建一个包含分组和好友列表的 HTML 结构。以下是一个示例：

<div class="group">
  <div class="group-header">好友分组1</div>
  <ul class="friend-list">
    <li>好友1</li>
    <li>好友2</li>
    <li>好友3</li>
  </ul>
</div>

<div class="group">
  <div class="group-header">好友分组2</div>
  <ul class="friend-list">
    <li>好友4</li>
    <li>好友5</li>
    <li>好友6</li>
  </ul>
</div>

2.2 CSS 样式

为了使分组和好友列表看起来更加美观，我们可以添加一些 CSS 样式。以下是一个示例：

.group-header {
  background-color: #eee;
  cursor: pointer;
  font-weight: bold;
  padding: 5px 10px;
}

.friend-list {
  display: none; /* 初始状态隐藏好友列表 */
  list-style: none;
  margin: 0;
  padding: 0;
}

.friend-list li {
  padding: 5px 10px;
}

.friend-list li:hover {
  background-color: #f0f0f0;
}

2.3 JavaScript 实现展开和收缩功能

在 JavaScript 中，我们需要添加事件监听器来处理分组头部的点击事件，并在点击时展开/收缩相应的好友列表。

以下是一个示例的 JavaScript 代码：

// 获取所有分组元素
var groups = document.querySelectorAll('.group');

// 遍历分组元素，为每个分组头部添加点击事件处理器
groups.forEach(function(group) {
  var header = group.querySelector('.group-header');
  var friendList = group.querySelector('.friend-list');

  header.addEventListener('click', function() {
    if (friendList.style.display === 'none') {
      friendList.style.display = 'block';
    } else {
      friendList.style.display = 'none';
    }
  });
});

3. 示例说明

示例1: 展开/收缩所有分组

有时，我们可能需要提供一个快捷的方式来展开或收缩所有的分组。以下是一个实现思路：

• 在 HTML 结构中添加一个按钮：

<button id="toggle-all">展开/收缩所有分组</button>

• 在 JavaScript 中添加相应的事件处理器：

var toggleAllButton = document.getElementById('toggle-all');

toggleAllButton.addEventListener('click', function() {
  groups.forEach(function(group) {
    var friendList = group.querySelector('.friend-list');

    if (friendList.style.display === 'none') {
      friendList.style.display = 'block';
    } else {
      friendList.style.display = 'none';
    }
  });
});

示例2: 初始状态展开指定的分组

有时，我们可能需要指定某个分组在初始状态下展开，而其他分组则处于收缩状态。以下是一个实现思路：

• 在 HTML 结构中为需要展开的分组头部添加一个自定义属性（例如，data-default-open），值为 true：

<div class="group">
  <div class="group-header" data-default-open="true">好友分组1</div>
  <ul class="friend-list">
    <li>好友1</li>
    <li>好友2</li>
    <li>好友3</li>
  </ul>
</div>

• 在 JavaScript 中判断分组头部的自定义属性，并根据属性值设置相应的初始状态：

groups.forEach(function(group) {
  var header = group.querySelector('.group-header');
  var friendList = group.querySelector('.friend-list');
  var defaultOpen = header.getAttribute('data-default-open');

  if (defaultOpen === 'true') {
    friendList.style.display = 'block';
  }
});

4. 总结

通过以上步骤，您可以实现一个简单的仿 QQ 好友列表的展开和收缩功能。通过 HTML 结构、CSS 样式和 JavaScript 代码的协同作用，用户可以方便地展开或收缩好友分组，提高用户体验。

希望本攻略对您有所帮助！如有任何疑问，请随时提问。

阅读剩余 68%