如何添加鏈接到標籤順序，當它們用CSS可見時？

Question

受display: none約束的鏈接不處於默認的製表順序。但是，當它們被透露時 - 例如當父鏈接獲得焦點時，下拉菜單的CSS將顯示一個子菜單 - 它們仍然不在標籤順序中。推測JavaScript是必需的，但只是設置tabindex="0"什麼也不做。

Answer 1

這裏的問題是，只要您切斷「帶有子級的頂級頁面」鏈接，就會更新CSS，並且在錨點可以獲得焦點之前，錨點的父級變爲顯示：無。您需要使用JavaScript來解決此問題，並使用超時延遲CSS中的更改，直到您可以確定焦點丟失是否導致焦點轉移到子元素。

當父級顯示時設置tabindex =「0」：none不會幫助，display：none表示內容可能不在文檔中。

Answer 2

我想出了一個基本上可行的解決方案：http://codepen.io/gyrus/pen/waKjKv/在IE中似乎存在一些問題，我正在研究這個問題。但總的思路是：

• 隱藏下拉
• 設置數據屬性標誌下拉里面的所有鏈接是否具有焦點之前添加一個小的延遲，並隱藏

前檢查這

這僅僅是jQuery的，檢查筆更多：

jQuery(document).ready(function($) { 
    $('.nav').on('mouseenter focusin', '.menu-level-0.menu-item-has-children', function(e) { 
     var el = $(this); 
     // Show sub-menu 
     el.attr('aria-expanded', 'true') 
      .find('.sub-menu-wrapper').show(); 
    }).on('mouseleave focusout', '.menu-level-0.menu-item-has-children', function(e) { 
     var el = $(this); 
     // Only hide sub-menu after a short delay, so links get a chance to catch focus from tabbing 
     setTimeout(function() { 
      var smw = el.find('.sub-menu-wrapper'); 
      if (smw.attr('data-has-focus') !== 'true') { 
       el.attr('aria-expanded', 'false'); 
       smw.hide(); 
      } 
     }, 100); 
    }).on('focusin', '.sub-menu-wrapper', function(e) { 
     var el = $(this); 
     el.attr('data-has-focus', 'true'); 
    }).on('focusout', '.sub-menu-wrapper', function(e) { 
     var el = $(this); 
     el.attr('data-has-focus', 'false');       
     // Hide sub-menu on the way out 
     el.hide().parents('.menu-level-0').attr('aria-expanded', 'false'); 
    }); 
});