Question

我正在开展一个大型项目，需要修复一些辅助功能问题。

我需要使用键盘上的Tab导航到“个人资料”图标，然后导航到“下拉菜单”。如果将鼠标悬停在“个人资料”图标上，则可以看到“下拉菜单”。

要选择“个人资料”图标，我添加了tabindex =＆＃34; 0＆＃34;虽然工作正常，但是下拉列表没有出现。

为了解决这个问题，我添加了额外的css。我复制了现有的CSS：

.user .user-profile-image：hover .dropdown-menu {display：block;}

并在新的一行中添加：

.user .user-profile-image：focus .dropdown-menu {display：block;}

现在，当您切换到个人资料图标时，您可以看到下拉菜单：

- 到现在为止还挺好。不幸的是，如果我在关注配置文件图标时再次单击制表符，则它不会关注下拉列表中的任何项目，因此我无法选择它们。

要解决此问题，我决定允许用户点击个人资料图标上的输入，这会将他们的焦点更改为第一个元素：

   $("#user-profile-image-click").keyup(function(event) {
        if (event.keyCode === 13) {
            alert(document.activeElement);
            $("#first-element-dropdown-list").focus();
            alert(document.activeElement);
        }
    });

此处的帐户设置＆＃39; li有id =＆＃34; first-element-dropdown-list＆＃34;和用户个人资料图标有id =＆＃34; user-profile-image-click＆＃34;。

奇怪的是，当用户点击输入时，他们会看到第一个提醒（仍然关注范围为id =＆＃34;用户个人资料图片点击＆＃34;正如预期的那样，然后是第二个警报完全相同。我已经将其他元素作为网页上下拉列表的一部分，但焦点仍然没有改变。

我不希望你能告诉我这是什么问题。我需要知道的是如何调试它？我已经去了几个小时。没有控制台错误，id =＆＃34; first-element-dropdown-list＆＃34;肯定存在。我正在测试chrome，所以focus（）肯定会起作用。 Jquery工作正常，否则警报不会弹出。

这个大型系统中有什么东西可以影响我的代码吗？我只想将其作为补丁添加到顶部，而不是更改任何下划线代码。关于如何找出导致问题的原因的任何建议？

--- ADDED ---

       <nav class="user clearfix">
                <div id="google_translate_element" class="google-translate-element"></div>
                <div class="user-info">
                                        <span class="user-profile-image" tabindex="0">
                        <span class="userpicture"><i class=" fa fa-user-circle-o"></i></span>
                        <span class="user-name">CA</span>
                        <ul class="dropdown-menu">
                            <li class="user-profile-data">
                                <span class="userpicture"><i title="Profile icon" class=" fa fa-user-circle-o"></i></span>
                                <div class="user-name">Corp Admin</div>
                            </li>
                            <li><a href="http://localhost:8888/moodle/user/view.php?id=2" title="Profile">Account Settings</a></li>
                            <li><a href="http://localhost:8888/moodle/login/change_password.php" title="Change password">Change password</a></li>
                            <li><a href="http://localhost:8888/moodle/login/logout.php?sesskey=4Wai1gYm3D" title="Sign Out">Sign Out</a></li>
                        </ul>
                    </span>
                </div>
                <div data-state="closed" aria-expanded="false" aria-label="dropdown menu" role="menu" class="mobile-toggler" tabindex="0"><i class="fa fa-bars"></i></div>
            </nav>

Answer 1

你能提供你的导航栏HTML吗？答案实际上取决于那个。

简短回答：为什么您的代码不起作用。因为你有css DataGridViewButtonColumn buttons = new DataGridViewButtonColumn(); { buttons.HeaderText = "Move Up"; buttons.Text = "⇧"; buttons.UseColumnTextForButtonValue = true; buttons.AutoSizeMode = DataGridViewAutoSizeColumnMode.AllCells; buttons.FlatStyle = FlatStyle.Standard; buttons.CellTemplate.Style.ForeColor = Color.Black; buttons.DisplayIndex = 3; buttons.Width = 60; }和js .user-profile-image:focus{display:block}

按Enter键时，将焦点更改为不再显示父元素的子元素。

因为父母正在失去焦点，所以你的下拉列表会因为你的css而被隐藏。

因为你的下拉列表是隐藏的。焦点将更改为$("#first-element-dropdown-list").focus();。

您的代码有效但看起来像无效。您可以使用undefined和focus()解决此问题。

好例子：打开https://getbootstrap.com/主页。然后使用blur()和tab或w3schools example

播放导航栏（页面顶部）

Answer 2

所以plonknimbuzz你是对的，当父改变为显示无，它就不再关注子元素。

为了解决这个问题，我删除了与此下拉列表相关的所有CSS并将其转换为以下JQuery：

<script>
    $('header .user .user-profile-image').hover(
      function() {
        $('header .user .user-profile-image .dropdown-menu').css('display','block');
        $('header .user .user-profile-image > .userpicture').css('display','none');
        $('header .user .user-profile-image .user-name').css('display','block');
      }, function() {
        $('header .user .user-profile-image .dropdown-menu').css('display','none');
        $('header .user .user-profile-image > .userpicture').css('display','block');
        $('header .user .user-profile-image .user-name').css('display','none');
      }
    );
    $('header .user .user-profile-image').focus(
      function() {
        $('header .user .user-profile-image .dropdown-menu').css('display','block');
        $('header .user .user-profile-image > .userpicture').css('display','none');
        $('header .user .user-profile-image .user-name').css('display','block');
      }
    );
    $('header .user .user-profile-image #signout-remove-focus').blur(
        function() {
        $('header .user .user-profile-image .dropdown-menu').css('display','none');
        $('header .user .user-profile-image > .userpicture').css('display','block');
        $('header .user .user-profile-image .user-name').css('display','none');
      }
    );
</script>

模糊部分有点像黑客。我添加了一个id =＆＃39; signout-remove-focus＆＃39;到下拉列表中的最后一个li，所以一旦它们跳过最后一个元素，列表就会消失。这是关注下拉列表的唯一方法，因为我相信网页总是运行“模糊”。或者＆＃39;悬停＆＃39;在它正在切换焦点的元素上运行它之前它所离开的元素上的事件。

此修复的不好之处在于，如果用户在下拉菜单处于焦点时开始移动鼠标，则除非将鼠标悬停在鼠标上，然后将鼠标移开，否则它不会消失。这是一个小错误，因为它需要最终用户使用制表符和鼠标的组合。

如果有人能想出一个更好的解决方案，我全都听见了！

按Enter键后，选项卡焦点不会改变

2 个答案: