Как я могу открыть раскрывающееся меню с событием keydown?

Question

Im, используя пример начальной загрузки выпадающего меню. Он открывает и закрывает только то, как это должно быть с щелчком мыши. Мне интересно, как я могу настроить этот код, чтобы имитировать ту же функциональность при использовании клавиатуры?

Я не хочу создавать новый пользовательский элемент управления. Нажав «tab», я могу перейти от одного фокусируемого элемента к другому.

Что я пробовал: Я добавил атрибут role = "button", а также tabindex = 0. Когда я нажимаю вкладку, пока не дойду до значка выпадающего меню (chevron-down), он откроет меню, когда я нахожусь в пробеле. Однако я не могу закрыть раскрывающееся меню, но он остается открытым. Может ли кто-нибудь поделиться идеями о том, как открыть и закрыть это меню?

<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> 
      ... 

Answer 1

В конечном счете, вы можете вызвать событие click из JavaScript. Если вы знакомы с jQuery, вы можете сделать, например:

$(window).on("keydown", function(){ $(".dropdown").trigger("click") });