Viv:
I think that your example can be best viewed in a fiddle:
https://jsfiddle.net/unnt15uk/And yes, I think that bootstrap can be very useful in UT.
>>>A mouseout event will fire but intervening ones may be skipped.
>>
>>Correct
>>
>>>Can you clarify 'the logic determines that one of the two needs to become hidden' and show a simple html of the divs involved ?
>>
>>I succeeded to bring this down to a very simple, simpler, page to use for this test sequence.
>>
>>You will have two labels on top. If you move the mouse over the labels, a menu appears. You may add a background color to the place holder div to understand better what I am saying. The place holder is tied to its menu but cannot be in it as its width varies based on the label. So, a transparent div is used over the label so we know that when the mouse moves out of the placeholder, that this is also considered a menu mouseout. So, we have two mouseout to watch for. There is the placeholder and the menu. There is some logic to verify that a mouseout going down the placeholder, thus over the active menu, won't trigger a deactivate. Then, in reverse, a mouseout of the menu, going over the placeholder, won't trigger a deactivate also.
>
>Seems like your trying to reinvent the wheel. Bootstrap (with a minor style change to handle hover) will do the job with no javascript required. This is all you will need:
<!DOCTYPE html>
><html xmlns="http://www.w3.org/1999/xhtml">
><head>
> <title>Test Menu</title>
> <style>
> .dropdown-menu li:hover .sub-menu {
> visibility: visible;
> }
>
> .dropdown:hover .dropdown-menu {
> display: block;
> margin-top: 0;
> }
> </style>
> <link href="Content/bootstrap.css" rel="stylesheet" />
> <script src="Scripts/jquery-2.2.3.js"></script>
> <script src="Scripts/bootstrap.js"></script>
></head>
><body>
> <ul class="nav nav-pills">
> <li class="dropdown">
> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Récent<b class="caret"></b></a>
> <ul class="dropdown-menu" id="menu1">
> <li><a href="#">Obtenir les messages d'aujourd'hui</a></li>
> <li><a href="#">Afficher tous les fils ayant de l'activité durant les deux derniers jours</a></li>
> <li><a href="#">UnansweredStatus</a></li>
> <li><a href="#">Affiche les nouveaux threads depuis les cinq derniers jours</a></li>
> </ul>
> <li class="dropdown">
> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Report<b class="caret"></b></a>
> <ul class="dropdown-menu" id="menu1">
> <li><a href="#">Obtenir tous les J'aime pour tous les messages</a></li>
> <li><a href="#">Répartition des usagers</a></li>
> <li><a href="#">Répartition des usagers pour les États-Unis</a></li>
> <li><a href="#">Etc</a></li>
> </ul>
> </li>
> </ul>
></body>
></html>
Fernando D. Bozzo
Madrid / Spain
