前言：
今天说一下在PC端中无法避免的上下文交互，像在知乎、论坛类、甚至搜索引擎类的应用中上下文交互都是普遍存在的。今天我们就通过来临摹知乎在学习一下上下文交互的实现
制作
一、首先完成静态页面的制作。
二、我们可以看到，页面我们大致可以分为三部分，第一部分为登录、收索框部分，这部分无任何交互，我们也无需将其命名。
第二部分为前言部分，这里我们可以看到有【显示全部】操作，这里就是今天我们要讲的上下文交互，将第二部分设置为动态面板，命名为【第二部分】将原先内容全部复制到动态面板中去，并设置状态为"展开"、"收起"。
点击展开内容拓展了，我们这里将第三部分内容部分设置为动态面板，并命名为【第三部分】。
页面下方的"点赞""评论"部分为第四部分，我们将其设置为动态面板命名为【第四部分】并将其隐藏。
三、接下来制作第二部分的上下文交互，当点击【第二部分】收起状态的"显示全部"按钮时，状态切换为"展开"状态，这里需要注意，当【第二部分】的状态切换时，对应展示面积是变大的，这里我们需要将【第三部分】【第四部分】相对的往下位移。
四、下面正文部分的上下文交互也是同理，正文可以拓展模块的长度，做法与【第二部分】同理，但是在第二部分展开与收起时需要判断【第三部分】是否展示开收起，适当调整对应位移位置，如果想做滚动就用动态面板嵌套的方式来实现，这里就不过多赘述。