Wie kann ich ein Element auslösen, das "klickt", WENN es momentan durch Tabs auf der Tastatur ausgewählt wird?

Question

Ich habe ein identisches Dropdown-Menü für jede der 5 Div-Boxen. Ich möchte Funktionen erstellen, bei denen ich, wenn ich zu einem dieser Dropdown-Menüs navigiere, das heißt über das Tab mit dem unten abgebildeten Chevron-Down-Symbol, das Menü, das gerade im Fokus ist, erweitern und reduzieren kann.

<div class="appExperience small-tile"> 
<div class="blue-bar"> 
<h2 class="tile-header">APPLICATION EXPERIENCE</h2> 
<span class="dropdown hidden-xs"> 
    <i class="tcm-chevron glyphicon glyphicon-chevron-down expand-icon dropdown-toggle" 
     role="button" 
     aria-labledby="Expand Application Experience Summary Dropdown Menu" 
     ng-src="{{dropdown_appExperience}}" 
     data-toggle="dropdown" 
     tabindex="0" 
     alt="Expand Application Experience Summary Dropdown Menu"></i> 
    <ul class="dropdown-menu appExperience tileContextMenu"> 
     <li> 
     List Item 1 
     </li> 
     <li> 
     List Item 2 
     </li> 
     ... 

Ich habe versucht, dies folgendes:

$(window).on("keydown", function() { 

     $('.glyphicon-chevron-down option:selected').trigger("click") 
    }); 

bearbeiten, ist dies ein weiterer neuer Versuch

if ($(".glyphicon-chevron-down").is(":focus")) { 
     $(window).on("keydown", function() { 
      $(".glyphicon-chevron-down").trigger("click") 
     }); 
    } 

Neueste Versuch Ich bin immer in der Nähe, aber die folgenden Code schlägt vor, dass Trigger keine Funktion ist?

$(window).on("keydown", function() { 

    console.log(document.activeElement); 
    console.log($(".glyphicon-chevron-down")[0]); 

    if (document.activeElement == $(".glyphicon-chevron-down")[0]) { 
     console.log("activeElement is recognized!") 
     console.log($(".glyphicon-chevron-down")[0]); 
     $(".glyphicon-chevron-down")[0].trigger("click"); 
     } 

});

Answer 1

Dadurch erhalten Sie das aktuell fokussierte Element. Sie können damit nach Ihren Wünschen arbeiten.

$(window).on("keyup", function() { 
    console.log(document.activeElement); 
}); 

Answer 2

ich Sie nicht denken müssen, wie die Registerkarte Ereignis verfolgen: $(".glyphicon-chevron-down").focus(function(){});, wäre ohne die zusätzliche Veranstaltung die Arbeit machen Drücken der Benutzer „Tab“ -Taste für die Verfolgung.

Versuchen:

$(".glyphicon-chevron-down").focus(function(){ 
    //do your logic here 
    //e.g 
    $(this).trigger("click"); // if this should expand on hover then bind hover event 
    // hover event 
    $(this).trigger("mouseover"); 
});