<分区>
我在处理切换按钮上的焦点开/关时遇到问题。如果我单击按钮，焦点会继续并出现容器，所以效果很好。如果我重新点击按钮，容器就会消失，但焦点仍然保持在焦点上!唯一的解决方案是在按钮外单击以关闭焦点，这非常糟糕。所以我想:当容器出现时焦点可见(单击按钮)并在容器消失时焦点关闭(重新单击按钮)。我该如何解决？ 这里 fiddle :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>