토글 버튼에 초점을 맞추는 방법?

Question

토글 버튼에서 초점을 켜고 끄는 문제가 있습니다. 버튼을 클릭하면 포커스가 이동하고 컨테이너도 표시되므로 잘 작동합니다. 버튼을 다시 클릭하면 컨테이너가 사라지지만 포커스는 여전히 포커스에 남아 있습니다! 유일한 해결책은 초점을 맞추기 위해 버튼 바깥 쪽을 클릭하는 것입니다. 이것은 매우 나쁩니다. 그래서 나는 원한다 : 콘테이너가 나타날 때 포커스가 보이고 (버튼을 클릭) 콘테이너가 사라지면 포커스가 사라진다 (버튼을 다시 클릭). 어떻게 해결할 수 있습니까? 여기를 클릭하십시오 : https://jsfiddle.net/vo1npqdx/802/ 버튼을 다시 클릭하면 볼 수 있듯이 컨테이너가 사라지지만 파란색 (초점)이 유지되므로 버튼이 자동으로 원래 색상으로 돌아 가지 않습니다.

CSS :

.ini{ 
color: red; 
border: 2px solid #0000FF; 
} 
.ini:hover, .ini:focus{ 
    color: blue; 
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.175); 
} 

JS :

$("#chi").hide(); 
    $("#hs1").click(function(){ 
     if($('#chi').is(':hidden')){ 
     $("#chi").toggle(500);} 
     else{$("#chi").hide(1000);} 
    }); 

HTML : 당신이 원하는

<a class="btn btn-default ini" id="hs1" href="#" role="button">TEST</a> 
<div class="container" id="chi"> 
     <div class="row"> 
      <div class="col-xs-11 col-sm-12 col-md-10 col-lg-8 col-centered"> 
       <div class="panel panel-primary"> 
        <div class="panel-heading"><h2>Test</h2><h5>Test</h5></div> 
        <div class="panel-body"> 
         <p>Test</p> 
         </div> 
       </div> 
      </div> 
     </div> 
     </div> 

Answer 1

? See this fiddle

CSS :

.ini:hover { 
    color: blue; 
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.175); 
} 

.active { 
    color: blue; 
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.175); 
} 

JS :

$("#chi").hide(); 
    $("#hs1").click(function(){ 
     $(this).toggleClass('active'); 
      if($('#chi').is(':hidden')){ 
     $("#chi").toggle(500);} 
     else{$("#chi").hide(1000);} 
    });