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

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

谢谢！

Answer 1

我还没有对它进行过多次搜索，但我认为您必须手动更新这些值，因此当您点击桌面时，您会强制更新移动设备，反之亦然。

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

1 个答案: