创建交错选择框

Question

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

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

我想创建一个选择框，将类别（在本例中：birds, mammals, reptiles）作为可见选项，当我打开选择框时会出现。当我悬停其中一个选项时，选项窗格的右侧会出现一个菜单，显示属于相应类别的项目。当我悬停“鸟”时，我想要一个显示选项chicken, ostrich, sparrow 的侧边菜单。悬停在侧边菜单上，它允许我在点击时选择其中一个选项，以便最终选择原始选择框的值。

从逻辑上讲，这个选择框应该对应于一个分组选择框 (<optgroup>)，但从技术上讲，它提供的不仅仅是一组选项。

这样的东西是否已经在某处可用？我怎样才能克服主要障碍，即选项元素没有触发hoverevents？

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>