zurb-foundation - Foundation 4 和 Orbit 定制

Question

是否有任何技术可以让您在调整窗口大小时更改列表的结构？

这是我的默认标记，在默认分辨率（980px）上显示 4 个项目：

<ul data-orbit data-options="bullets:false; container_class:'rafting-cont'">    
  <li>
    <div>…&lt;/div>
    <div>…&lt;/div>
    <div>…&lt;/div>
    <div>…&lt;/div>
  </li>
</ul>

但我想将其更改为只有两个小于 768 像素的分辨率。标记应动态更改为：

<ul data-orbit data-options="bullets:false; container_class:'rafting-cont'">
  <li>
    <div>…&lt;/div>
    <div>…&lt;/div>
  </li>
  <li>
    <div>…&lt;/div>
    <div>…&lt;/div>
  </li>
</ul>

我试图通过 jquery unwrap 和 wrap 函数来实现，但它不起作用，因为基础和轨道已经初始化。

任何想法我怎么能做到这一点？

Answer 1

你在使用 .hide-for-small 和 .show-for-small 类吗？

<ul>

    <li>
        <div> item 1 </div>
        <div> item 2 </div>
        <div class="hide-for-small"> item 3 </div>
        <div class="hide-for-small"> item 4 </div>
     </li><!-- end slide-1-a-->

    <li class="show-for-small"> 
        <div> item 3 </div>
        <div> item 4 </div>
     </li><!-- end slide-1-b-->

</ul>