Question

让我们假设一个层次结构：

{ 
  birds: [ chicken, ostrich, sparrow], 
  mammals: [mouse, horse, lion], 
  reptiles: [ crocodile, tortoise, lizard] 
}

我想创建一个选择框，将类别（在这种情况下为birds, mammals, reptiles）作为可见选项，当我打开选择框时出现。当我将鼠标悬停在这些选项之一上时，菜单将显示在选项窗格的右侧，显示属于各个类别的项目。当我将鼠标悬停在“鸟”上时，我需要一个显示选项chicken, ostrich, sparrow的侧面菜单。悬停在侧面菜单上，它使我可以在单击时选择这些选项之一，从而最终获得原始选择框的值。

从逻辑上讲，此选择框应与分组的选择框（<optgroup>）相对应，但从技术上讲，它不仅仅提供一组选项。

这样的东西已经在某个地方可用了吗？我该如何克服主要障碍，即选项元素不触发hover事件？

Answer 1

如何使用复选框作为切换？

Fiddle

<div class="listitem">
   <label for="type1">
     Birds
   </label>
   <input id="type1" type="checkbox" />
   <div class="listitem-group">
       <button>Chicken</button>
       <button>Ostrich</button>
       <button>Sparrow</button>
   </div>
</div>

创建隔行扫描选择框

1 个答案: