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)
            }
        });
});

当鼠标悬停在每个按钮上时，可以看到相应的下拉菜单
之后，我按Tab键，当每个按钮聚焦时，相应的菜单可见
但在此之后，当我尝试将鼠标悬停在按钮上时，相应的菜单就不会显示出来。

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功能似乎隐藏了你不期望的东西。因此，当您尝试显示菜单块时，没有任何显示。

快速简单的测试就是从这个

中更改CSS文件中的内容

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

到这个

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

如果有效，请继续阅读...

从代码中，您似乎只是试图通过 .dropdown-content 类（也是 ul 标记）来控制可见性。

我相信你的JQuery类不仅隐藏了 ul 元素，还隐藏了该标记中的一些元素（很可能是 li 元素）。由于您的CSS没有考虑到这一点，因此它们永远不再显示。

在这里，您将显示的隐藏类分配给 ul 元素的子元素。（问：你的意思是分配给hidden_menu类吗？）

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

由于 li 元素也是隐藏的（通过父元素），此代码也匹配它们（它们具有 a 元素，可以通过兄弟测试）。因此，可以将 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();

如果这是问题（在本文开头给出的快速测试），那么你可以：
a）在分配hidden_menu之前检查类类型 b）在使用hidden_menu之前检查类类型（特别是在隐藏之前）
c）添加类似于上面给出的CSS块，以便在悬停时显示ul元素下的所有内容

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

1 个答案: