JQLiteでCSSホバードロップダウンをリセットする

現在、メインナビゲーションバーにドロップダウンメニューを持つAngular SPAを開発中のプロジェクトに入っています。この効果を得るために、我々はCSS：ホバーセレクターを使用しています。問題は、このドロップダウン内でアクションが実行されたときに、それらを再び開く能力を損なうことなくそれらを閉じたいということです。例えば、ユーザがこのドロップダウンの1つ（ui-srefとの内部リンク）内のリンクを開くと、彼はこの特定の状態になりますが、ドロップダウンはマウスをその外に移動するまで表示されます新しいコンテンツが表示されます）。内部のアクションが実行されたときにドロップダウンが閉じられるようにしたい場合は、ユーザーが再び開くようにする場合は、トリガーを介して再びマウスをホバーすることができます。JQLiteでCSSホバードロップダウンをリセットする

クラスを削除して再追加しようとしましたが（タイムアウト後も）、ドロップダウンが再び表示されます。私たちが達成しようとしているものと同様の設定で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; 
}

ありがとう！

出典

2016-08-27 Rising Concupiscence