将侧边栏菜单更改为屏幕最小化时的下拉菜单

Question

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

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

谢谢！

Answer 1

我没有搜索太多，但我认为您必须手动更新值，因此当您单击桌面时，您会强制更新移动设备，另一种方式也是如此。