隐藏的分区标签通(可访问性）

click 事件在单击链接或按 Enter 时执行 JavaScript 操作。

<div id="dropdown-menus">
  <div id="section1-drop" class="drop-section hidden-panel">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
  </div>
  <div id="section2-drop" class="drop-section hidden-panel">
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
  </div>
</div>
<ul id="dropdown-links" class="menu main-tabs">
  <li>
    <a class="panel-btn" 
       data-section="section1-drop"
       id="drop-link-section1">section 1</a>
  </li>
  <li>
    <a class="panel-btn" 
       data-section="section2-drop"
       id="drop-link-section2">section 2</a>
  </li>
</ul>

上面，我删除了 href 属性并添加了一个 data-section 元素，该元素指定此链接激活哪个部分。这更具语义和可读性，现在我们可以在jQuery中设置处理程序。

定义焦点处理程序：

// Setup the focus handler for the root links
$('.panel-btn').on('click', function(e) {
    var link = $(this);
    var section = link.attr('data-section');
    // Pass in the current link and the section name to dropMenu
    dropMenu($(this), section);
});

我已经清理了您的下拉菜单功能以澄清发生了什么

function dropMenu(link, menusection) {
  // Get the section specified by the menusection id
  var section = $('#' + menusection);
  // Get the open section by checking for the active class
  var openSection = $('#dropdown-menus').find('.drop-section.active');
  // Anonymous function for activating a section and focussing the 
  // first link within the section
  var showSection = function() {
    // Slide the section into view
    section.slideDown(500).addClass('active');
    // Focus the first link in the section.
    section.find('a').first().focus();
  }
  // If there is a section open, we want to slide it up first,
  // then call showSection when that has completed.
  if(openSection.length > 0) {
    // If the open section is the one that was clicked, we want
    // to simply close that section rather than open another
    if(openSecion[0] === section[0]) {
        openSection.slideUp(500).removeClass('active');
    }
    else {
        openSection.slideUp(500, showSection).removeClass('active');
    }
  }
  // Otherwise, we can just show the section straight away.
  else {
    showSection();
  }
}

这都是非常标准的，但是您现在需要处理各部分之间的移动，因为您希望使用Tab键在本地发生。问题是，由于您的"拖放部分"位于根链接上方，因此从拖放部分中的最后一个链接开始按 Tab 键将始终将您带回第 1 部分，因为这是文档中的下一个可选项卡元素。为了防止这种情况，我们需要解决一些默认功能并实现我们自己的功能。

首先，您需要配置一个keydown处理程序，以便在 Tab 发生之前捕获它

// Setup a keydown handler to handle tabbing on section links
$('.drop-section').on('keydown', 'a', function(e) {
  if(e.keyCode === TAB_KEY) {
    var link = $(this);
    // Flag determins whether to prevent default tab behaviour
    var preventDef = false;
    // Travel to previous link on SHIFT + TAB
    if(e.shiftKey) {
      preventDef = travelPrevious(link);
    }
    // Travel to next link on TAB
    else {
      preventDef = travelNext(link);
    }
    // Prevent default focus behaviour
    if(preventDef) {
      e.preventDefault();
    }
  }
});

然后我们需要函数来处理下一个选项卡和上一个选项卡

// Handles travelling to the next link
function travelNext(link) {
  var next = link.next();
  if(next.length > 0) {
    // Continue with default behaviour of moving to next link
    return false;
  }
  // Drop section parent ID
  var parentId = link.parents('.drop-section').attr('id');
  // Root link whose data-section attribute matches parent ID
  var rootLink = $('.panel-btn[data-section=' + parentId + ']').parent();
  // Next root link to move to.
  var nextLink = rootLink.next().find('a');
  // Focus on the next root link, which will fire dropMenu for 
  // the next section.
  nextLink.focus();
  // Prevent default behaviour
  return true;
}
function travelPrevious(link) {
  var prev = link.prev();
  if(prev.length > 0) {
    // Continue with default behaviour of moving to previous link
    return false;
  }
  // Drop section parent ID
  var parentId = link.parents('.drop-section').attr('id');
  // LI container for Root link whose data-section attribute matches parent ID
  var rootLink = $('.panel-btn[data-section=' + parentId + ']').parent();
  // Previous root link to move to.
  var prevLink = rootLink.prev().find('a');
  // Focus on the previous root link, which will fire dropMenu for 
  // the previous section.
  prevLink.focus();
  // Prevent default behaviour
  return true;
}

这仍然不是一个完整的解决方案，因为它无法处理到达所有部分的结尾或开头。这应该是一个开始，我相信它回答了你的第一个问题。如果您对此还有其他问题，则应单独询问。

这是一个小提琴示例https://jsfiddle.net/rjvw915r/17/

更新

如果您的链接以非标准方式包含在拖放部分中，则上述方法将不起作用，因为它使用寻找直接兄弟姐妹的next和prev函数。如果每个 a 标记都包含在 div 或 li 包装器中，则它们没有直接的同级。

我们可以通过回顾已知的父元素并通过选择器查找所有同级元素来解决此问题。在键控函数中，我们将添加一些额外的代码来检索这些元素，并将它们传递给旅行函数。

$('.drop-section').on('keydown', 'a', function(e) {
    if(e.keyCode === TAB_KEY) {
        var link = $(this);
        // Retrieve all available links within the parent.
        var linkCollection = link.parents('.drop-section').find('a');
        ...

在每个旅行函数中，我们传递这些链接

preventDef = travelPrevious(link, linkCollection);
... 
preventDef = travelNext(link, linkCollection);

通过查找当前链接的索引，我们可以确定它之前或之后是否有任何兄弟姐妹。

在travelNext函数中，我们检查其后是否有任何链接

// Find where the current link sits within the collection
var linkIndex = linkCollection.index(link);
var nextIndex = linkIndex + 1;
if(nextIndex < linkCollection.length) {
  // Continue with default behaviour of moving to next link.
  return false;
}

在travelPrevious函数中，我们检查它之前是否有任何链接

// Find where the current link sits within the collection
var linkIndex = linkCollection.index(link);
var nextIndex = linkIndex - 1;
if(nextIndex >= 0) {
  // Continue with default behaviour of moving to previous link
  return false;
}

查看更新的小提琴 https://jsfiddle.net/rjvw915r/18/