列可折叠到移动设备上的按钮

Question

我有一个 2 栏的页面，我希望在小屏幕上将第一栏替换为只有一个按钮的小栏。当您单击该按钮时，原始的第一列再次出现（例如，就像在 Wordpress 上一样）。

谢谢。

Answer 1

您不能在断点处将列缩减为按钮（如果不添加大量代码的话），但您可以：

• 使用 class="column small-12 hide-for-medium" 添加一个新列，然后将按钮放在那里...这将使该列从中等高度隐藏。
• 可折叠列（第一个）将有 class hide-for-small-only，因此这将隐藏在小断点上；请在此列中添加一个 id。
• 使用jQuery，点击按钮，hide/show第一列（有ID的，你应该用slideToggle() from jQuery），就是这样。

希望对您有所帮助。