Question

我一直在制作一个下拉菜单/弹出式菜单，我有一个很好的工作，只有一个例外;当您单击链接（或按Enter键）打开菜单时，焦点应设置为可以获得焦点的下一个元素。所以在这个例子中，点击＆＃34;菜单1＆＃34;链接，应展开菜单，并将焦点设置在＆＃34;测试1＆＃34;。但出于某种原因，它会跳转到最后一个可聚焦元素（测试3）：

<ul class="axxs-menu">
  <li><a class="trigger">Menu 1</a>
    <ul class="content">
      <li><a href="#1">test 1</a></li>
      <li><a href="#2">test 2</a></li>
      <li><a href="#3">test 3</a></li>
    </ul>
  </li>
</ul>

以下是相关的js：

jQuery.extend(jQuery.expr[':'], {
    focusable: function(el, index, selector){
    return $(el).is('a, button, :input, [tabindex]');
}
});

function openPopmenu(element) { 
$(element).removeClass('trigger-inactive').addClass('trigger-active').attr("aria-expanded", "true").attr("aria-selected", "true");
 $(element).next('.collapsed').removeClass('collapsed').addClass('expanded').show().attr("aria-hidden", "false");
$(element).next().find(':focusable').focus();
}

这是一个代码笔：

http://codepen.io/tactics/pen/EZbGBY

非常感谢任何帮助。

Answer 1

此语句$(element).next().find(':focusable').eq(0).focus();将查找具有focusable属性的所有元素并返回最后一个元素。你想要做的是将它限制在第一个特定的一个。您可以使用.eq（）函数来指定您想要的实际索引

//MyForm.h private: System::Void load_rt_chart_Click(System::Object^ sender, System::EventArgs^ e) { String^ Stime = "09:00"; for(int sIndex=0; sIndex < 10; sIndex++){ //insert data to candlestick chart rt_chart->Series["Series1"]->Points->AddXY(sTime, 100); //hight rt_chart->Series["Series1"]->Points[sIndex]->YValues[1] = 10; //low rt_chart->Series["Series1"]->Points[sIndex]->YValues[2] = 20; //open rt_chart->Series["Series1"]->Points[sIndex]->YValues[3] = 30; //close } cout << rt_chart->Series["Series1"]->Points->Count; //i can get points of count number here for 10 }

Answer 2

您需要的是find the first focusable element：

$(element).next().find(':focusable').first().focus();

如果没有.first()，则focus()会应用于匹配:focusable的所有元素，最终会聚焦最后一个元素。

Answer 3

Drews answer 的一些改进，因为输入类型 hidden 不可聚焦并且应该被排除。所以用这个替换“.find(':focusable')”：

.find('button, a, input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])')

Answer 4

：focusable psuedo选择器仅可用于jquery-ui。如果仅使用jquery，则将'.find（'：focusable'）替换为以下内容：

.find('button, a, input, select, textarea, [tabindex]:not([tabindex="-1"])')

如何将焦点放在第一个可聚焦元素jQuery上？

4 个答案: