Question

我为5个div框中的每一个都有一个相同的下拉菜单。我想创建功能，当我导航到其中一个下拉菜单时，即通过Tab键显示下面代码中显示的V形图标，我可以展开和折叠当前焦点的菜单。

<div class="appExperience small-tile">
<div class="blue-bar">
<h2 class="tile-header">APPLICATION EXPERIENCE</h2>
<span class="dropdown hidden-xs">
    <i class="tcm-chevron glyphicon glyphicon-chevron-down expand-icon dropdown-toggle"
       role="button"
       aria-labledby="Expand Application Experience Summary Dropdown Menu"
       ng-src="{{dropdown_appExperience}}"
       data-toggle="dropdown"
       tabindex="0"
       alt="Expand Application Experience Summary Dropdown Menu"></i>
    <ul class="dropdown-menu appExperience tileContextMenu">
        <li>
       List Item 1
        </li>
        <li>
       List Item 2
        </li>
         ...

我试过以下这个：

 $(window).on("keydown", function() {

        $('.glyphicon-chevron-down option:selected').trigger("click")
  });

编辑，这是另一项新尝试

  if ($(".glyphicon-chevron-down").is(":focus")) {
        $(window).on("keydown", function() {
            $(".glyphicon-chevron-down").trigger("click") 
        });
    }

最新尝试 我接近了，但是下面的代码表明触发器不是函数？

 $(window).on("keydown", function() {

    console.log(document.activeElement);
    console.log($(".glyphicon-chevron-down")[0]);

   if (document.activeElement == $(".glyphicon-chevron-down")[0])  {
       console.log("activeElement is recognized!")   
        console.log($(".glyphicon-chevron-down")[0]);
         $(".glyphicon-chevron-down")[0].trigger("click");
       }

}）;

Answer 1

我认为您不需要跟踪标签事件：$(".glyphicon-chevron-down").focus(function(){});，无需额外事件即可跟踪用户＆＃34;标签＆＃34;按下按钮。

尝试：

$(".glyphicon-chevron-down").focus( function(){
   //do your logic here
   //e.g
   $( this ).trigger("click"); // if this should expand on hover then bind hover event
   // hover event
   $( this ).trigger("mouseover");
});

Answer 2

这将为您提供当前焦点的元素。然后，您可以根据自己的喜好使用它。

$(window).on("keyup", function() {
    console.log(document.activeElement);
});

如果当前通过键盘上的选项卡选择元素，如何触发元素“点击”？

2 个答案: