使用自定义jQuery滑块和键盘键检测事件

我构建了一个简单的自定义滑块，用户可以在其中单击网格中的项目，它将显示所选项目的内容，还可以让用户使用左右键盘箭头浏览其他网格内容项目。

HTML结构如下：

<div class="grid-container"> <!-- this is the grid container -->
  <div class="grid-item" tabindex="1"> <!-- grid item -->
    <div class="grid-item-preview">    <!-- preview container -->
      <img class="grid-item-preview-image" src="http://placehold.it/360x240" />
    </div>
    <div class="grid-item-content">    <!-- content container, hidden at first and opens when the user clicks on the preview container -->
      <div class="grid-item-content-left">
        <img class="grid-item-original-image" src="http://placehold.it/640x480?text=Item1" />
      </div>
      <div class="grid-item-content-right">
        <h3 class="grid-item-title">
          This is a test item
        </h3>
        <p class="grid-item-text">
          This is some filler text
        </p>
      </div>
    </div>
  </div>
</div>

问题是，使用我的代码，jQuery只遍历HTML元素一次，如果用户再次按下箭头键，它就无法再次工作，除非用户再次关闭并打开新的网格项。

我的js/jQuery代码如下：

$( document ).ready( function() {
$( '.grid-item' )
.on( 'click', function() {
    $( this ).toggleClass( 'open-grid-item' );
    $( this ).find( '.grid-item-content' ).fadeToggle();
})
    .on( 'keydown', function( event ) {
    if( $( this ).hasClass( 'open-grid-item' ) ) {
    switch( event.keyCode ) {
        case 37: $( this )                  //User press left arrow  
        .removeClass( 'open-grid-item' )  //Removes class
        .find( '.grid-item-content' )      //Find the content container
        .fadeOut()                        //Fade out content container                      
        .parent()                         //Traverses to parent div .grid-item
        .prev( '.grid-item' )             //Traverses to previous div .grid-item
        .addClass( 'open-grid-item' )     //Add class open grid
        .find( '.grid-item-content' )      //Traverses to content container of the new div
        .fadeIn();                        //Shows content div
        break;
      case 39: $( this )
        .removeClass( 'open-grid-item' )  //Same as before, but traverses to next .grid-item 
        .find( '.grid-item-content' )
        .fadeOut()
        .parent()
        .next( '.grid-item' )
        .addClass( 'open-grid-item' )
        .find( '.grid-item-content' )
        .fadeIn();
        break;
    }
  }
});
});

我在这里有一个工作演示：https://jsfiddle.net/wuzrcnus/4/

如何修改我的代码以使用户能够使用箭头键导航到所有网格项？谢谢