Material Design 中实现折叠列表的 5 种方法（详细教程）-JavaScript中文网-JavaScript教程资源分享门户

Material Design 是 Google 推出的一种全新的设计语言，它以平面化、卡片化、阴影化、动画化等特点为主要特征，旨在为用户提供更加直观、美观、易用的设计体验。在 Material Design 中，折叠列表是一种常见的 UI 控件，它可以展示多层级的内容，帮助用户更加方便地浏览和管理信息。本文将介绍 Material Design 中实现折叠列表的 5 种方法，帮助前端开发人员轻松实现这一功能。

方法一：使用 CSS3 动画

CSS3 动画是一种非常方便的实现折叠列表的方法，它可以通过控制元素的高度实现折叠和展开的效果。具体实现步骤如下：

首先，需要定义一个包含折叠列表的容器元素和一个触发折叠的按钮元素。

<div class="container">
  <button class="collapse-btn">折叠</button>
  <ul class="list">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
  </ul>
</div>

然后，需要定义折叠列表的样式，包括容器元素、列表元素和按钮元素的样式。

// www.javascriptcn.com code example
.container {
  border: 1px solid #ccc;
  padding: 10px;
}
.list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  transition: all .3s ease;
  max-height: 0;
}
.list li {
  padding: 5px;
  border-bottom: 1px solid #ccc;
}
.collapse-btn {
  display: block;
  margin: 10px 0;
}

最后，需要添加 JavaScript 代码，实现按钮的点击事件和列表的展开和折叠效果。

// www.javascriptcn.com code example
var btn = document.querySelector('.collapse-btn');
var list = document.querySelector('.list');
var isOpen = false;
btn.addEventListener('click', function() {
  if (isOpen) {
    list.style.maxHeight = '0';
    isOpen = false;
    btn.textContent = '折叠';
  } else {
    list.style.maxHeight = '1000px';
    isOpen = true;
    btn.textContent = '展开';
  }
});

方法二：使用 jQuery 插件

jQuery 插件是一种快速实现折叠列表的方法，它可以通过调用插件函数实现折叠和展开的效果。具体实现步骤如下：

首先，需要引入 jQuery 库和折叠列表插件。

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.collapse/0.9.3/jquery.collapse.js"></script>

然后，需要定义一个包含折叠列表的容器元素和一个触发折叠的按钮元素。

<div class="container">
  <button class="collapse-btn">折叠</button>
  <ul class="list">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
  </ul>
</div>

最后，需要添加 JavaScript 代码，调用折叠列表插件的函数，实现列表的展开和折叠效果。
```
$('.list').collapse();
```

方法三：使用 Bootstrap 框架

Bootstrap 框架是一种流行的前端框架，它提供了一系列 UI 控件和组件，包括折叠列表。具体实现步骤如下：

首先，需要引入 Bootstrap 库和折叠列表样式。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
  integrity="sha384-3Iv1f9iV8BmYlB7lRm6F2QwV8U3q3L6VqZT9T9D1gNfNzQHgSOJ4C4xwGJ4j1Mf7"
  crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

然后，需要定义一个包含折叠列表的容器元素和一个触发折叠的按钮元素。

// www.javascriptcn.com code example
<div class="container">
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample"
    aria-expanded="false" aria-controls="collapseExample">
    折叠
  </button>
  <div class="collapse" id="collapseExample">
    <div class="card card-body">
      <ul class="list-group">
        <li class="list-group-item">列表项1</li>
        <li class="list-group-item">列表项2</li>
        <li class="list-group-item">列表项3</li>
      </ul>
    </div>
  </div>
</div>

最后，需要添加 JavaScript 代码，实现列表的展开和折叠效果。
```
$('.collapse').collapse();
```

方法四：使用 Vue.js 框架

Vue.js 框架是一种流行的前端框架，它提供了一种数据驱动的方式实现 UI 控件和组件，包括折叠列表。具体实现步骤如下：

首先，需要引入 Vue.js 库和折叠列表组件。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-collapse@1.6.0/dist/vue-collapse.min.js"></script>

然后，需要定义一个 Vue 实例，包含一个折叠列表组件和一个触发折叠的按钮元素。

// www.javascriptcn.com code example
<div id="app">
  <button v-on:click="isOpen = !isOpen">{{ isOpen ? '折叠' : '展开' }}</button>
  <vue-collapse :is-open="isOpen">
    <ul>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
    </ul>
  </vue-collapse>
</div>

new Vue({
  el: '#app',
  data: {
    isOpen: false
  }
});

方法五：使用 React 框架

React 框架是一种流行的前端框架，它提供了一种组件化的方式实现 UI 控件和组件，包括折叠列表。具体实现步骤如下：

首先，需要引入 React 库和折叠列表组件。

<script src="https://unpkg.com/react@16.13.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@4.11.0/umd/material-ui.production.min.js"></script>

然后，需要定义一个折叠列表组件和一个触发折叠的按钮元素。

<div id="app"></div>

// www.javascriptcn.com code example
function App() {
  const [isOpen, setIsOpen] = React.useState(false);
  const handleToggle = () => {
    setIsOpen(!isOpen);
  };
  return (
    <div>
      <button onClick={handleToggle}>{isOpen ? '折叠' : '展开'}</button>
      <Collapse in={isOpen}>
        <List>
          <ListItem>列表项1</ListItem>
          <ListItem>列表项2</ListItem>
          <ListItem>列表项3</ListItem>
        </List>
      </Collapse>
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById('app'));

以上就是 Material Design 中实现折叠列表的 5 种方法的详细教程，希望能够对前端开发人员有所帮助。不同的方法适用于不同的场景，开发人员可以根据自己的需求选择合适的方法。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d23c79a941bf7134441792

Material Design 中实现折叠列表的 5 种方法（详细教程）

方法一：使用 CSS3 动画

方法二：使用 jQuery 插件

方法三：使用 Bootstrap 框架

方法四：使用 Vue.js 框架

方法五：使用 React 框架

接着读