javascript - 创建交错选择框

Question

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

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

我想创建一个选择框，将类别(在本例中为:birds, mammals, reptiles)作为可见选项，当我打开选择框时会出现这些选项。当我悬停其中一个选项时，选项 Pane 右侧会出现一个菜单，显示属于相应类别的元素。当我将鼠标悬停在“鸟”上时，我想要一个显示选项 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>