列可折叠到手机上的按钮

Question

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

谢谢。

Answer 1

不能减小列到一个按钮上一个断点（没有添加大量的代码），但你可以：

• 添加一个新列class="column small-12 hide-for-medium"，并把按钮有...这将使列隐藏起来。
• 可折叠列（第一个）将具有类hide-for-small-only，所以这将隐藏在小断点上;请在此栏中添加id。
• 使用jQuery，点击按钮，隐藏/显示第一列（带ID的那个，你应该使用slideToggle() from jQuery），就是这样。

希望这会有所帮助。