單擊關閉按鈕時如何將焦點輪廓返回到按鈕

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

我試圖在單擊圖層（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>