Évitez de mettre en surbrillance les éléments du menu déroulant Bootstrap de Twitter lorsque vous cliquez en dehors du menu

Question

J'ai remarqué un comportement étrange dans bootsmen dropmenus: lorsque l'utilisateur clique n'importe où en dehors du menu déroulant, tout élément en surbrillance qui a été cliqué précédemment perd sa surbrillance.

vous pouvez voir que dans le lien suivant: http://twitter.github.io/bootstrap/components.html#dropdowns

cliquant sur l'élément nommé « Action » mettra en évidence, et puis en cliquant sur ne importe où en dehors supprimer la surbrillance. Je suppose que c'est une conception - même si je ne comprends pas la logique: une fois que je clique sur un élément dans un menu déroulant, je souhaite qu'il ne soit désélectionné que lorsque je clique sur un autre élément - pas en dehors du menu.

Des suggestions sur la façon d'éviter ce comportement? J'ai essayé d'utiliser stopPropogation sur n'importe quel clic - mais cela ne fonctionne pas.

Merci!

Answer 1

Je ne sais pas si ce comportement sera étrange. La surbrillance est définie par le focus du lien. En cliquant sur autre où supprimer le focus et ainsi le style (mise en évidence). Pour modifier ce comportement, ajoutez une classe css à lier au focus (et supprimez cette classe pour les liens ciblés précédents). Donnez à cette classe css le même style que les classes en surbrillance.

exemple html:

<div class="dropdown clearfix"> 
       <ul style="display: block; position: static; margin-bottom: 5px; *width: 180px;" aria-labelledby="dropdownMenu" role="menu" class="dropdown-menu"> 
       <li><a href="#1" tabindex="-1">Action</a></li> 
       <li><a href="#2" tabindex="-1">Another action</a></li> 
       <li><a href="#3" tabindex="-1">Something else here</a></li> 
       <li class="divider"></li> 
       <li><a href="#4" tabindex="-1">Separated link</a></li> 
       </ul> 
</div> 

code CSS de la classe pour ajouter (appelé concentré):

.dropdown-menu > li > a.focused 
{ 
    color: #ffffff; 
    text-decoration: none; 
    background-color: #0081c2; 
    background-image: -moz-linear-gradient(top, #0088cc, #0077b3); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3)); 
    background-image: -webkit-linear-gradient(top, #0088cc, #0077b3); 
    background-image: -o-linear-gradient(top, #0088cc, #0077b3); 
    background-image: linear-gradient(to bottom, #0088cc, #0077b3); 
    background-repeat: repeat-x; 
    outline: 0; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0); 
} 

javascript:

$('.dropdown li a').focus(function(){ 
    $('.dropdown li a').removeClass('focused'); 
    $(this).addClass('focused');  

    }); 

Exemple/démo: http://bootply.com/66106