如何模擬與鍵盤事件懸停

我有以下HTML模板，其中列表項目動態添加到下拉列表中。如何模擬與鍵盤事件懸停

<button class="btn btn-default btn-sm dropdown" (keydown)="triggerTraverse($event)"></button> 
    <fa-list-filler> 
     <li *ngFor="let item of items [class.active]="checkItem(item,selectedItem)"> 
      <span (click)="doNavigate()" class="cookie"></span> 
     </li> 
    </fa-list-filler>

我有一個列表項下懸停風格：

li > .cookie { 
     cursor: pointer; 
     &:hover{ 
      background-color: 'yellow'; 
     } 
    }

當我將鼠標懸停我的鼠標這些列表中的項目，我可以看到應用到列表項即我可以懸停風格在這種情況下請參閱黃色背景顏色。

默認情況下，第一項被選中，即它有活躍的類。然後，當用戶按下向下箭頭鍵時，活動類保持在相同的位置，但懸停狀態應該向下移動到下一個列表項，並且移到下一個項目上，並且應該環繞。

我實現了下面的方法，但是我無法正確地繼續使用後面的元素。

triggerTraverse(evt: KeyboardEvent){ 
    if(evt.keyCode === 27){ 
    closeDropdown(); 
}else if(evt.keyCode === 40){ 
    let initialEle = document.querySelector('li.active'); 
initialEle.nextElementSibling.firstElementChild.classList.add('hoverstyle'); 
} 
}

hoverstyle是我剛剛實施的的backgroundColor添加到元素的另一個類。

.hoverstyle{ 
background-color: 'pink'; 
}

任何人都可以請幫忙。

來源

2017-02-23 zelda

你看到hoverstyle'添加到'裏的類' '在檢查部分？ – Searching

是的。但這僅僅發生在第二個元素上，因爲我沒有進一步遍歷整個列表。 – zelda

Kul，回答這個問題，如果邏輯從'li.active'（你的第一個元素）開始，然後向下移動，它會實際上超出第二個元素嗎？ – Searching

跟蹤選定的索引並使用ngClass指令。

例如：

模板：

<input ... (keydown)="onKeydown($event)"> 
<div *ngFor="let option of options; let i = index;" 
    (mouseover)="highlight(i)" 
    [ngClass]="{'selected': i === selectedIndex}"> 
    <span>{{ option }}</span> 
</div>

組件：

selectedIndex = 0 

... 

highlight(i: number) { 
    this.selectedIndex = i; 
} 

onKeydown(event: KeyboardEvent) { 
    if (event.code === 'ArrowUp' && this.selectedIndex > 0) { 
     event.preventDefault(); 
     this.selectedIndex--; 
    } else if (event.code === 'ArrowDown' && this.selectedIndex < (this.options.length - 1)) { 
     event.preventDefault(); 
     this.selectedIndex++; 
    } 
}

CSS：

.selected { 
    background-color: red; 
}

來源

2017-02-23 04:32:00 shusson

非常感謝:) – zelda

雖然我遇到了一個問題，當下拉列表中有很多元素時，當我用向下或向上箭頭遍歷列表時，元素不會進入視圖。我怎樣才能做到這一點？任何提示？ – zelda

如何模擬與鍵盤事件懸停

回答

相關問題