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

Question

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

谢谢。

Answer 1

您无法将列缩减为断点上的按钮（不是没有添加大量代码），但您可以：

• 使用class="column small-12 hide-for-medium"添加一个新列，然后将按钮放在那里......这样可以使列隐藏在中等位置。
• 可折叠列（第一个）将具有类hide-for-small-only，因此这将隐藏在小断点上;请在此列中添加 ID 。
• 使用jQuery，在按钮上单击，隐藏/显示第一列（具有ID的列，您可以使用slideToggle() from jQuery），就是这样。

希望这有帮助。