Question

我有2个按钮和一个可以控制显示/隐藏的图层（div）。

我要在单击layer（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

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

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

Answer 2

您也可以尝试使用添加新类。让我们看下面的示例。

$(function($) {

  $(".btn1, .btn2").on("click", function(){
  //instead of using body you can use any upper html element
    $('body').find('.setFocouss').removeClass("setFocouss");
    $(".layer").show().attr("tabindex","0").focus();
     $(this).addClass('setFocouss')

  }); 
  $(".close").on("click", function(){
    $(".layer").hide();
    $('.setFocouss').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 3

您需要将单击的按钮存储在变量中，然后将焦点放在该按钮上。

$(function($) {
  var btn;
  $(".btn1, .btn2").on("click", function(){
    btn=$(this);
    $(".layer").show().attr("tabindex","0").focus();;
  }); 
  $(".close").on("click", function(){
    $(".layer").hide();
    btn.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>

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

3 个答案: