Question

我试图制作一个在聚焦或点击时出现的面板。最初它只是在点击时很容易设置它，但是为了可访问性我需要这样做，所以当有人选中它（焦点）时它也会扩展。我尝试制作它，因此它只在焦点上打开，因为点击也会聚焦，但是在打开后单击时它不会关闭，因为焦点仍然启用。任何人都知道如何使这项工作？

$('.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();
});

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

将您的代码还原为仅绑定点击时，您应该好好去

Answer 2

切换意味着不止一次使用。当您使用.one()方法时，您只需要做一次...... 修复：使用.on()
如果有相反的效果方法，则可能是两种方法的组合。 修复： toggleClass()和slideToggle()替换相应的add/removeClass()和slideDown/Up()方法。
.on()方法可以处理多个事件，当focus和blur的函数对所有事件都相同时，无需为其创建另一个事件处理程序（即切换）。 修复：将click focus blur添加到.on()方法。
将style=display:none添加到$('.online-banking-slidedown')，只要.toggleClosed班级在CSS中有display:none，就可以将其删除。
由于按钮是<a> nchor，因此添加e.preventDefault()以防止链接跳转到其他位置是一个很好的预防措施。

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何在焦点或单击时切换隐藏面板？

2 个答案: