随着用户体验的重视，Material Design 成为了设计师和前端开发人员的首选界面设计语言。而节点图及其展开效果是 Material Design 中常见的交互方式之一，那么我们该如何实现它呢？
1. 节点图
1.1. 概述
节点图（也称为层次结构图或树形图）是一种以树状结构表示层次关系的图表，它是一种非常直观的可视化方式，能够清晰的展示出层级之间的关系。
1.2. 实现方式
1.2.1. HTML 结构
-- -------------------- ---- -------
--- -------------
------ -
----
------ --------
------ --------
-----
-----
------ ------
-----1.2.2. 样式
-- -------------------- ---- ------- ----- - ----------- ----- ------- -- -------- -- - ----- -- - ------- -- -------- ---- -- --------- --------- - ----- ----------- ----- --------- - -------- --- ----- ------ --------- --------- ------ ----- - ----- ---------- - ------------ --- ----- ----- ------- ----- ------- ----- ---- -- ------ ---- - ----- --------- - ----------- --- ----- ----- ------- ----- ---- ----- ------ ----- - ----- ---------------------- - ---- ----- - ----- --------------------- - ------- ----- - ----- -------------------- - ------- ----- -
1.2.3. 效果
1.3. 优化
现在的节点图还没有实现节点的展开效果。如果所有节点都展开的话，页面会变得非常繁琐和难以维护，因此，我们可以把子节点隐藏起来，在点击父节点时再展示出来。
1.3.1. HTML 结构
-- -------------------- ---- -------
--- -------------
------------ --------
----
------------ ---------------
------------ ---------------
-----
-----
------------ -------------
-----1.3.2. 样式
-- -------------------- ---- ------- ----- -- ---- - ------- -------- -------- ------------- ------------- ----- - ----- -- -- - -------- ----- ------------ ----- - ----- --------- - -- - -------- ------ -
1.3.3. JavaScript
document.addEventListener('click', (e) => {
if (e.target.tagName === 'SPAN') {
e.target.parentNode.classList.toggle('active');
}
});1.3.4. 效果
2. 节点图展开效果
我们已经成功地实现了节点图，下面我们再来看一下展开效果。
2.1. 概述
节点图的展开效果主要有两种方式：水平展开和垂直展开。水平展开是指在水平方向上展开子节点，而垂直展开则是在垂直方向上展开子节点。
2.2. 实现方式
2.2.1. HTML 结构
-- -------------------- ---- -------
--- -------------
------------ --------
----
------------ ---------------
------------ ---------------
-----
-----
------------ -------------
-----2.2.2. 样式
-- -------------------- ---- -------
----- -- ---- -
------- --------
-------- -------------
------------- -----
-
----- -- -- -
---------- ---------- ---- ------------
-------- -----
------------ -----
-
----- -- --------- -
---------- -------- ---- ------------
-------- ------
-
---------- ---------- -
-- -
-------- --
---------- ------------------
-
---- -
-------- --
---------- --------------
-
-
---------- -------- -
-- -
-------- --
---------- --------------
-
---- -
-------- --
---------- ------------------
-
-2.2.3. JavaScript
-- -------------------- ---- -------
---------------------------------- --- -- -
-- ----------------- --- ------- -
----- ------ - --------------------
----- ------ - ----------------------------------
-- -------- -
----------------------------------
- ---- -
---------------------------------------------------
-
-
---2.2.4. 效果
2.2.4.1. 水平展开
-- -------------------- ---- -------
--- ----------- ------------
------------ --------
----
------------ ---------------
------------ ---------------
-----
-----
------------ -------------
------- -------------------- ---- -------
---------------- -- -- -
---------- ----------- ---- ------------
-------- -----
------------ -----
-
---------------- -- --------- -
---------- ---------- ---- ------------
-------- ------
-
---------- ----------- -
-- -
-------- --
---------- ------------------
-
---- -
-------- --
---------- --------------
-
-
---------- ---------- -
-- -
-------- --
---------- --------------
-
---- -
-------- --
---------- ------------------
-
-2.2.4.2. 垂直展开
-- -------------------- ---- -------
--- ----------- ----------
------------ --------
----
------------ ---------------
------------ ---------------
-----
-----
------------ -------------
------- -------------------- ---- -------
-------------- -- -- -
---------- ---------- ---- ------------
-------- -----
------------ -----
-
-------------- -- --------- -
---------- -------- ---- ------------
-------- ------
-
---------- ---------- -
-- -
-------- --
---------- ------------------
-
---- -
-------- --
---------- --------------
-
-
---------- -------- -
-- -
-------- --
---------- --------------
-
---- -
-------- --
---------- ------------------
-
-结论
节点图及其展开效果是一个非常常见的交互方式，通过本文的介绍，我们已经可以清楚的知道如何实现这些效果了。在实际开发中，我们可以根据需要进行样式和 JavaScript 的优化，使页面更加美观和易于维护。希望本文对你有所帮助，谢谢阅读！
示例代码见: https://codepen.io/chrisgou/pen/rNmXWQx
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67515d0c8bd460d3ad88f2f1