0

ウィンドウのサイズ変更時にリストの構造を変更できる手法はありますか?

これは、デフォルトの解像度 (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>

しかし、768pxより小さい解像度で2つだけになるように変更したいと思います。マークアップは次のように動的に変更する必要があります。

<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 関数を使用して実行しようとしましたが、基礎と軌道が既に初期化されているため、機能しません。

どのように私はそれを行うことができますか？

4

1 に答える 1

0

クラス .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>
于 2013-06-23T21:24:54.280 に答える