Ich bin gerade in einem Projekt, das ein Angular SPA entwickelt, das Dropdown-Menüs in seiner Hauptnavigationsleiste enthält. Um diesen Effekt zu erzielen, verwenden wir CSS: Hover-Selektoren. Das Problem ist, dass wir, wenn eine Aktion innerhalb dieser Dropdown-Liste ausgeführt wird, diese schließen möchten, ohne die Möglichkeit zu behindern, sie erneut zu öffnen. Wenn ein Benutzer beispielsweise eine Verknüpfung in einem dieser Dropdown-Felder öffnet (interner Link mit ui-sref), wird er in diesen bestimmten Zustand versetzt, aber das Dropdown-Menü ist immer noch sichtbar, bis er die Maus nach außen bewegt (und teilweise verdeckt) neuer Inhalt gezeigt). Wir möchten, dass das Dropdown-Menü geschlossen wird, wenn eine Aktion ausgeführt wird, und wenn der Benutzer es erneut öffnen möchte, kann er die Maus erneut über den Auslöser bewegen.CSS-Hover-Dropdown mit JQLite zurücksetzen
Wir haben versucht, Klassen zu entfernen und wieder hinzuzufügen (auch nach einer Zeitüberschreitung), aber das Dropdown-Menü erscheint wieder.
Link zu einem Plunker mit einem Setup ähnlich dem, was wir versuchen zu erreichen: https://plnkr.co/edit/qzQk4r2WQFhwsgUWug39?p=preview
und die entsprechenden Abschnitte (Angular-Controller verzichtet, da es keinen Inhalt hat):
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;
}
Dank!