jQuery的擴大獨特的分MEU

Question

我的項目有一定的li元素，他們的類名相同（.expanded）

我的目標是當用戶按下Tab鍵，然後在li.expaned顯示了隱藏的子菜單。

現在的問題是，當我按下tab鍵時，所有的子菜單都顯示出來了。如何一個一個地顯示它？

$(document).ready(function() { 
    $('.expanded').keyup(function (e) { 
     $('.expanded').each(function() { 
      console.log('keyup called'); 
      var code = e.keyCode || e.which; 

      if (code == '9') { 
       //jQuery(this).children('.side_menu_sub li ul').css("display", "block"); 
       $(this).children('.side_menu_sub li ul').css("display", "block"); 
      } 
     }); 
    }); 
}); 

Answer 1

試試這個：

$(this).find('> .side_menu_sub > li > ul').css("display", "block"); 

您可以隨時檢查您console.log荷蘭國際集團選擇他們的元素。只需玩CSS選擇器。

此外，將重用的jQuery對象存儲在變量中是一種很好的做法。您應該使用on而不是特定的功能。結果將是：

$(document).ready(function() { 
    expanded = $('.expanded'); 
    expanded.on('keyup', function (e) { 
     expanded.each(function() { 
      console.log('keyup called'); 
      var code = e.keyCode || e.which; 

      if (code == '9') { 
       //jQuery(this).children('.side_menu_sub li ul').css("display", "block"); 
       $(this).find('> .side_menu_sub > li > ul').css("display", "block"); 
      } 
     }); 
    }); 
});