如何使隐藏的面板切换到焦点或单击？

Question

我正在尝试制作一个在聚焦或单击时出现的面板。最初它只在点击上，它很容易这样设置，但为了便于访问，我需要让它变得更容易，这样当有人用Tab键访问它(焦点)时，它也会扩展。我试着让它只在焦点上打开，因为点击也会聚焦，但在打开后点击时它不会关闭，因为焦点仍处于启用状态。有谁有办法让它工作吗？

$('.online-banking a.button.toggleClosed').one("click focusin", function() {
    $(this).removeClass('toggleClosed');
    $(this).addClass('toggleOpen');
    $('.online-banking-slidedown').slideDown(function() {
        $('.online-banking-slidedown input[type="text"]').focus();
    });
});
$('.online-banking a.button.toggleOpen').one("click focusout", function() {
    $(this).removeClass('toggleOpen');
    $(this).addClass('toggleClosed');
    $('.online-banking-slidedown').slideUp(function() {
        $('.online-banking-slidedown input[type="text"]').blur();
    });

这是HTML

<div class="online-banking">
    <a href="#" class="button toggleClosed">Online <span>Banking</span> Login</a>
    <div class="online-banking-slidedown">
        <form id="login" name="login" method="post" action="login.aspx">
            <input type="radio" name="radio" value="radio" id="banking_personal" checked="checked">
            <label class="personal" for="banking_personal">Personal</label>
            <input type="radio" name="radio" value="radio" id="banking_business">
            <label class="business" for="banking_business">Business</label>
            <input name="LoginName" type="text" maxlength="25" autocomplete="off" placeholder="User ID">
            <input type="submit" value="Sign In" data-category="Login" data-action="Click" data-label="Button" data-value="">
        </form>
    </div>
</div>

Answer 1

我认为当涉及到可访问性(AODA)时，你可能会有错误的想法。您的按钮不是隐藏的，只是隐藏了一些内容。所以没有必要将焦点绑定到锚上，对于AODA来说，唯一真正要做的就是将焦点设置在单击按钮后显示的内容上。这样用户就知道发生了什么事。

或者，您可以宣布某些内容刚刚显示给用户。当用户再次点击按钮(关闭)时，焦点应该只停留在锚点上，所以那里应该没有任何待办事项。

要将焦点设置在内容上，例如div，您只需要给它一个tabindex="-1"，然后您就可以使用js以编程方式聚焦它。

看起来你已经在向下滑动后将焦点设置到输入上了，这很棒。

您可以删除

$('.online-banking-slidedown').slideUp(function() {
    $('.online-banking-slidedown input[type="text"]').blur();
});

因为当您单击按钮以关闭它时，焦点已经在按钮上，不需要模糊。

将您的代码恢复到仅绑定click时的状态，这样就可以正常运行了

Answer 2

• 切换意味着不止一次使用。当你使用.one()方法时，这就是你能得到的do...once。解决方法:使用.on()
• If的有一个相反的效果方法，然后可能会有两种方法的组合。修复： toggleClass()和slideToggle()替换了相应的add/removeClass()和slideDown/Up()方法。
• .on()方法可以处理多个事件当函数对所有<代码>d17和<代码>d18都相同(即切换)时，不需要为它们创建另一个事件处理程序。修复:将method.
• Added添加到.on() click focus blur to .on() style=display:none to $('.online-banking-slidedown')，只要.toggleClosed类在CSS中有display:none，就可以将其删除。
• 由于该按钮是<a>nchor，因此添加e.preventDefault()是一个很好的预防措施，以防止链接跳转到其他位置。

​

$('.online-banking a.button.toggleClosed').on("click focus blur", function(e) {
  e.preventDefault();
  e.stopImmediatePropagation();
  $(this).toggleClass('toggleClosed toggleOpen');
  $('.online-banking-slidedown').slideToggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="online-banking">
  <a href="#" class="button toggleClosed">Online <span>Banking</span> Login</a>
  <div class="online-banking-slidedown" style='display:none'>
    <form id="login" name="login" method="post" action="login.aspx">
      <input type="radio" name="radio" value="radio" id="banking_personal" checked="checked">
      <label class="personal" for="banking_personal">Personal</label>
      <input type="radio" name="radio" value="radio" id="banking_business">
      <label class="business" for="banking_business">Business</label>
      <input name="LoginName" type="text" maxlength="25" autocomplete="off" placeholder="User ID">
      <input type="submit" value="Sign In" data-category="Login" data-action="Click" data-label="Button" data-value="">
    </form>
  </div>
</div>

​