使用jquery显示元素时，焦点可见性会丢失

Question

我有一个页面，其中有许多下拉菜单，这些菜单在悬停事件中使用css可见。不过，我也希望在按Tab键时使它们可见，并且使用jquery进行焦点。我尝试这样做：

并执行以下操作：

$("body").keydown(function(e) { 
     var keyCode = e.keyCode || e.which; 
     if (keyCode === 9) { 

      $("*").bind("focus",function(){ 
      var $self = $(this); 

       if($self.siblings("*:hidden").length > 0){ 
        hidden_menu = $self.next("*:hidden"); 
        if($(hidden_menu).is("ul")){ 
         $(hidden_menu).show(); 
         $(hidden_menu).children().addClass("shownhidden");       
        } 
       } 
       $("*").unbind("focus");    
      }) 
     } 
     $("*").focusout(function(){   
      if(!$(this).next().is(".shownhidden") && $(this).is(".shownhidden")){ 
       setTimeout(function(){ 
        $(hidden_menu).hide(); 
       },1000) 
      } 
     }); 
}); 

1. 当我将鼠标放在每个按钮对应的下拉菜单可见
2. 后，我按tab键，当每个按钮变成对应的菜单是可见的
3. 但之后，当我尝试将鼠标移到按钮上时，相应的菜单不显示。

的HTML代码是由许多元素像这样如下：

  <li id="navMenuButton" class="dropdown"> 
       <button class="dropbtn">Menu</button> 
       <ul class="dropdown-content"> 
       <li><a href="#">Menu 1</a></li> 
       <li><a href="#">Menu 2</a></li> 
       <li><a href="#">Menu 3</a></li> 
       </ul> 
      </li> 

这部分CSS代码是：

.dropbtn { 
    background-color: #9AEDF3; 
    padding: 14px; 
    border: none; 
    cursor: pointer; 
} 

/* The container <div> - needed to position the dropdown content */ 
.dropdown { 
    position: relative; 
    display: inline-block; 
} 

/* Dropdown Content (Hidden by Default) */ 
.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 

/* Links inside the dropdown */ 
.dropdown-content a { 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
} 

/* Change color of dropdown links on hover */ 
.dropdown-content a:hover {background-color: #f1f1f1} 

/* Show the dropdown menu on hover */ 
.dropdown:hover .dropdown-content { 
    display: block; 
} 

/* Change the background color of the dropdown button when the dropdown content is shown */ 
.dropdown:hover .dropbtn { 
    background-color: #3e8e41; 
} 

什么问题？

Answer 1

你的jQuery函数似乎隐藏了你不期望的东西。因此，当您尝试显示菜单块时没有任何显示。

一个快速和简单的测试是从这个

/* Show the dropdown menu on hover */ 
.dropdown:hover .dropdown-content { 
    display: block; 
} 

在你的CSS文件来改变这个这个

/* Show the dropdown menu on hover */ 
.dropdown:hover .dropdown-content, .dropdown:hover li, .dropdown:hover a { 
    display: block; 
} 

如果一切正常，然后阅读...

从代码中，您似乎试图仅通过.dropdown-content类（这也是ul标签）。

我相信，你的JQuery类不仅隐藏UL元素但也有一些在该标签的元素（最有可能的李元素）。由于你的CSS没有考虑到这一点，他们从不再显示。

此处您将显示隐藏类分配给ul元素的子代。 （问：你的意思是分配给hidden_​​menu类本身）

$(hidden_menu).show(); 
$(hidden_menu).children().addClass("shownhidden"); 

由于李元素也被隐藏（通过父），此代码对他们也匹配（他们有一个元件，其会通过兄弟姐妹测试）。因此，li元素可以被分配给hidden_​​menu。

$("*").bind("focus",function(){ 
var $self = $(this); 
if($self.siblings("*:hidden").length > 0) { 
    hidden_menu = $self.next("*:hidden"); 
    ... 
} 

而这段代码会隐藏不需要的元素。

$("*").focusout(function(){ 
    if(!$(this).next().is(".shownhidden") && $(this).is(".shownhidden")){ 
     setTimeout(function(){ 
     $(hidden_menu).hide(); 

如果是这样的问题（在这篇文章的开头给出的快速测试），那么你可以：
一）分配hidden_​​menu
前B类类型检查）在使用前检查类类型hidden_​​menu（特别是在隐藏之前）
c）添加CSS块，像上面给出的那样，在hl元素下显示ul元素下的所有内容