В настоящее время я работаю над проектом Angular SPA, который имеет выпадающие меню в своем главном навигаторе. Чтобы получить этот эффект, мы используем селектор CSS: hover. Проблема в том, что когда действие выполняется в этих выпадающих списках, мы хотели бы закрыть их, не мешая возможности их снова открыть. Например, если пользователь открывает ссылку в одном из этих выпадающих меню (внутренняя ссылка с ui-sref), он затем переносится в это конкретное состояние, но раскрывающийся список все равно будет отображаться до тех пор, пока он не вытащит мышь за ее пределы (и частично затеняет новый контент). Мы хотели бы, чтобы выпадающий список закрывался, когда действие было выполнено, и если пользователь хотел бы открыть его снова, он сможет снова навести курсор мыши на триггер.Сброс выпадающего меню CSS с JQLite
Мы попытались удалить и повторно добавить классы (даже после таймаута), но выпадающий список снова появится снова.
Ссылка на Plunker с установкой аналогично тому, что мы пытаемся достичь: https://plnkr.co/edit/qzQk4r2WQFhwsgUWug39?p=preview
И соответствующие части (Угловая контроллер опущено, поскольку это не имеет никакого содержания):
HTML:
<div class="hoverable has-dropdown">
<button class="dropdown-trigger">Hover me!</button>
<div class="dropdown">
Dropdown content
<button ng-click="buttonAction()">Action</button>
</div>
</div>
CSS:
.dropdown {
display: none;
position: absolute;
top: 20px;
width: 100px;
height: 100px;
background: lightgrey;
padding: 1em;
}
.has-dropdown {
position: relative;
height: 20px;
}
.has-dropdown .dropdown-trigger:hover + .dropdown,
.has-dropdown .dropdown-trigger + .dropdown:hover {
display: block;
}
Спасибо!