Question

我有这个组件：

$chevron.on('click', function(e) {
  e.preventDefault();
  $('.disclaimer-wrapper').slideDown('fast', function() {
    $(this).focus();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="footer">
  <div class="disclaimer-wrapper"> //this div is hidden Hidden Content
  </div>
</section>

我正在尝试点击一个锚点（$chevron），然后显示元素.disclaimer-wrapper，但文档在出现时没有聚焦或向下滚动到该元素，因此用户无法看到正在显示的新内容。

我错过了什么？

Answer 1

jQuery Focus不适用于div，但有一种解决方法，简单来说，你需要将div的tab索引设置为-1，如下所示：

＆＃13;

$('#chevron').on('click', function(e) {
  e.preventDefault();
  $('.disclaimer-wrapper').slideDown('fast', function() {
    $(this).attr("tabindex", -1).focus();
  });
});

＆＃13;

.disclaimer-wrapper {
  display: none;
}

.disclaimer-wrapper:focus {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="footer">
  <a href="#" id="chevron">click</a>
  <div class="disclaimer-wrapper"> //this div is hidden Hidden Content
  </div>
</section>

＆＃13;

这是fiddle，您可以查看。

如何关注刚刚出现的div？

1 个答案: