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);}
  });

如何关注切换按钮？

1 个答案: