0

Zurb Foundation 5 フレームワークを使用して、小さなデバイスでサイドバー メニューをドロップダウンに変換し、大きなデバイスでオプションを選択すると (たとえば、チェックボックスを選択すると)、小さなデバイスに反映されます。

以下のようなチェックボックスを含むサイドバー メニューがあるとします。

<div class="row ">
<div class = "medium-4 large-3 columns show-for-medium-up"> 
<ul>
 <li><input type="checkbox" id="check1">Apple</li>
 <li><input type="checkbox" id="check1">Banana</li>
 <li><input type="checkbox" id="check1">Orange</li>
 <li><input type="checkbox" id="check1">Mango</li>
</ul>
</div> </div>

このメニューを小さなデバイスのドロップダウンに変換したいと考えています。私は次のことを試しました：

<div class="show-for-small-only" id="sidebar-small" >
    <button data-dropdown="drop1" aria-controls="drop1" aria-expanded="false">Select Fruits <i class="fi-arrow-down"></i>
    </button>
    <ul id="drop1" class="f-dropdown content" data-dropdown-content aria-hidden="true" tabindex="-1">
     <li><input type="checkbox" id="check1">Apple</li>
     <li><input type="checkbox" id="check1">Banana</li>
     <li><input type="checkbox" id="check1">Orange</li>
     <li><input type="checkbox" id="check1">Mango</li>
    </ul>
</div>

しかし、私が望むのは、たとえば、デスクトップ上のAppleをチェックするときです。小さいデバイスでもチェックしたいのですが、その逆も同様です。

トップバーをドロップダウンメニューに変換するには、「toggle-topbar menu-icon」があることを知っています。しかし、サイドバー メニューの場合、大きな画面で行われた変更 (チェックボックスのチェック/チェック解除) を反映するドロップダウン メニューに変換するにはどうすればよいですか?

ありがとう！

4

1 に答える 1

0

私はそれについてあまり検索していませんが、値を手動で更新する必要があると思うので、デスクトップをクリックするとモバイルの更新が強制され、その逆も同様です。

于 2014-12-15T21:40:09.083 に答える