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，我希望它也能在较小的设备上进行检查，反之亦然。

我知道要将顶部栏转换为下拉菜单，有“切换顶部栏菜单图标”。但是对于我的侧边栏菜单，如何将其转换为反映在大屏幕上所做的更改（选中/取消选中复选框）的下拉菜单？

谢谢！

4

1 回答 1

0

我没有搜索太多，但我认为你必须手动更新这些值，所以当你点击桌面时，你会强制更新移动设备，反之亦然。

于 2014-12-15T21:40:09.083 回答