使用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元素下的所有內容