Materialize CSS 框架中的 Collapsible 使用指南

class Collapsible

Materialize CSS 提供了一个简单易用的折叠面板（Collapsible）组件，适用于显示和隐藏内容。这种组件非常适合用于展示 FAQs、菜单选项或任何需要用户可选择查看的内容。本文将详细介绍如何使用 Materialize CSS 的 Collapsible，包括基本用法、参数和示例。

1. Collapsible 的基本用法

Collapsible 组件允许用户通过点击标题来展开或折叠内容。下面是实现该功能的基本步骤。

1.1. 引入 Materialize CSS

首先，在你的 HTML 文档中引入 Materialize CSS 和相关的 JavaScript 文件。你可以使用 CDN 链接：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Materialize Collapsible 示例</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
  <!-- Collapsible 将放在这里 -->
</body>
</html>

1.2. 添加 Collapsible 结构

在 <body> 标签内添加 Collapsible 的基本 HTML 结构：

<body>
  <ul class="collapsible">
    <li>
      <div class="collapsible-header">问题 1</div>
      <div class="collapsible-body"><span>这是问题 1 的答案。</span></div>
    </li>
    <li>
      <div class="collapsible-header">问题 2</div>
      <div class="collapsible-body"><span>这是问题 2 的答案。</span></div>
    </li>
    <li>
      <div class="collapsible-header">问题 3</div>
      <div class="collapsible-body"><span>这是问题 3 的答案。</span></div>
    </li>
  </ul>
</body>

2. 初始化 Collapsible

为了使 Collapsible 功能正常，你需要在页面加载后使用 JavaScript 初始化它。可以在 <script> 标签内添加如下代码：

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.collapsible');
    var instances = M.Collapsible.init(elems);
  });
</script>

3. Collapsible 的可选参数

Materialize CSS 的 Collapsible 支持一些可选参数，可以根据需要进行配置：

  • accordion: 布尔值，设置为 true 时，启用手风琴模式，即一次只能展开一个项目。
  • onOpenStart: 函数，打开折叠项前调用。
  • onOpenEnd: 函数，打开折叠项后调用。
  • onCloseStart: 函数，关闭折叠项前调用。
  • onCloseEnd: 函数，关闭折叠项后调用。

4. 完整示例代码

以下是一个完整的示例，展示了如何使用 Materialize CSS 的 Collapsible：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Materialize Collapsible 示例</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      padding: 20px;
    }
  </style>
</head>
<body>

  <h2 class="center-align">常见问题解答</h2>

  <ul class="collapsible">
    <li>
      <div class="collapsible-header">问题 1</div>
      <div class="collapsible-body"><span>这是问题 1 的答案。</span></div>
    </li>
    <li>
      <div class="collapsible-header">问题 2</div>
      <div class="collapsible-body"><span>这是问题 2 的答案。</span></div>
    </li>
    <li>
      <div class="collapsible-header">问题 3</div>
      <div class="collapsible-body"><span>这是问题 3 的答案。</span></div>
    </li>
  </ul>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var elems = document.querySelectorAll('.collapsible');
      var instances = M.Collapsible.init(elems);
    });
  </script>
</body>
</html>

5. 效果演示

在上述示例中，我们创建了一个包含三个问题的 Collapsible 列表。用户可以通过点击问题标题展开或折叠相应的答案。

6. 小技巧

  • 自定义内容：你可以在 collapsible-body 中放置任何 HTML 内容，例如文本、图像、按钮等，使其更加丰富。
  • 手风琴模式：如果想要实现手风琴效果，只需在初始化时将 accordion 参数设置为 true：
var instances = M.Collapsible.init(elems, { accordion: true });

总结

Materialize CSS 的 Collapsible 是一个强大的组件，适合用于展示可折叠的内容。通过简单的 HTML 和 JavaScript 初始化，你可以快速实现一个美观的折叠面板效果。希望本指南能帮助你在项目中有效利用 Materialize CSS 的 Collapsible。

chat评论区
评论列表
menu