Wie konzentrieren Sie sich auf eine Umschalttaste?

Question

Ich habe ein Problem, indem ich Fokus auf An/Aus auf einer Toggle-Taste behandle. Wenn ich auf den Knopf klicke, geht der Fokus weiter und auch der Container erscheint, so dass es gut funktioniert. Wenn ich wieder auf den Knopf klicke verschwindet der Container aber der Fokus bleibt immernoch im Fokus! Die einzige Lösung ist, klicken Sie außerhalb der Schaltfläche, um den Fokus zu deaktivieren, und das ist sehr schlecht. So möchte ich: Fokus sichtbar machen, wenn der Container erscheint (Klick auf den Button) und fokussieren, wenn der Container verschwindet (erneut auf den Button klicken). Wie kann ich es reparieren? Hier Geige: https://jsfiddle.net/vo1npqdx/802/ Wie Sie sehen können, wenn Sie erneut auf die Schaltfläche klicken, verschwindet der Container, aber die blaue Farbe (Fokus auf) bleibt erhalten, so dass die Schaltfläche nicht automatisch in die ursprüngliche Farbe zurückkehrt.

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

du wollen? 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);} 
    });