javascript - 单击关闭按钮时如何将焦点轮廓返回到按钮

Question

我有2个按钮和一层(div)它可以控制显示/隐藏。

我试图在点击图层(div)中的关闭按钮后制作它们，焦点(轮廓)移动到我之前点击的按钮。

但是我被 jquery 困住了，我不知道哪个是错误的。

这是我到目前为止尝试过的，请帮忙。

$(function($) {

  $(".btn1, .btn2").on("click", function(){
    $(".layer").show().attr("tabindex","0").focus();;
  }); 
  $(".close").on("click", function(){
    $(".layer").hide();
    $(".btn1, .btn2").focus();
  }); 
  
});

.btn1 { background:red}
.btn2 { background:blue}
.layer { display:none; margin:50px 0 0 0;  border:1px solid #000; background:gray }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn1">btn1</button>
<button class="btn2">btn2</button>
 
<div class="layer">
  layer
  <button class="close">close</button>
</div>

Answer 1

I am trying to make them after click the close button which is in layer(div), the focus(outline) move to the button where I clicked before.

在 .btn1 和 .btn2 的点击处理程序中，您可以跟踪最近点击的按钮，当可折叠的 div 关闭时，您可以简单地关注这个最近点击的按钮。

这是更新后的片段:

$(function($) {
  var previouslyClickedButton;
  $(".btn1, .btn2").on("click", function(){
    $(".layer").show().attr("tabindex","0").focus();;
    previouslyClickedButton = this;
  }); 
  $(".close").on("click", function(){
    $(".layer").hide();
    $(previouslyClickedButton).focus();
  }); 
  
});

.btn1 { background:red}
.btn2 { background:blue}
.layer { display:none; margin:50px 0 0 0;  border:1px solid #000; background:gray }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn1">btn1</button>
<button class="btn2">btn2</button>
 
<div class="layer">
  layer
  <button class="close">close</button>
</div>