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

Question

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

谢谢。

Answer 1

您不能在断点处将一列缩减为一个按钮（并非不添加大量代码），但您可以：

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

希望这会有所帮助。