Создать чересстрочное окно выбора
Предположим иерархическую структуру:
{
birds: [ chicken, ostrich, sparrow],
mammals: [mouse, horse, lion],
reptiles: [ crocodile, tortoise, lizard]
}
Я хочу создать поле выбора с категориями (в данном случае: birds, mammals, reptiles) в качестве видимых параметров, которые появляются, когда я открываю поле выбора. Когда я навожу курсор на одну из этих опций, в правой части панели опций появляется меню, в котором отображаются элементы, принадлежащие к соответствующей категории. Когда я навожу курсор на «птиц», мне нужно боковое меню, в котором отображаются параметры chicken, ostrich, sparrow. Наводя курсор на боковое меню, он позволяет мне выбрать один из этих параметров по щелчку, так что, в конце концов, значение исходного поля выбора.
Логически это поле выбора должно соответствовать сгруппированному полю выбора (<optgroup>), но технически оно предлагает больше, чем просто группировку параметров.
Что-то подобное уже есть где-то? И как я мог преодолеть основные препятствия, т.е. элементы опций, которые не запускали hoverсобытия?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Как насчет использования флажка в качестве переключателя?
<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>
Лучшее решение, которое я нашел, находится здесь: stackoverflow.com/questions/52525943/…