title: How to my toggle button change color only my collapse is opened in my bootstrap 3 navbar
body: <p>When we open collapse, button change color. but when we closed collapse by button click, the button doesn't return to its initial color. Button is focused. And I want that lost the focus.</p>
  
  <p>I have tried with css :focus, but it didn´t lose focus after collapse have been closed by button.
  I think that jquery function is necessary, although I've tried, my js skills shouldn't be sufficient. </p>
  
  <p>I need help please</p>
  
  <p><a href="http://jsfiddle.net/badAdviceGuy/Hg4Ts/4/" rel="nofollow">Demo</a></p>
  
  <p>My Html code:</p>
  
  <pre><code>    &lt;div class="wrapper"&gt;
    &lt;div class="navbar navbar-default" role="navigation"&gt;
          &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;a class="navbar-brand" href="#"&gt;Project name&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="navbar-collapse collapse"&gt;
            &lt;ul class="nav navbar-nav"&gt;
              &lt;li class="active"&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
              &lt;li class="dropdown"&gt;
                &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                &lt;ul class="dropdown-menu"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="divider"&gt;&lt;/li&gt;
                  &lt;li class="dropdown-header"&gt;Nav header&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
            &lt;ul class="nav navbar-nav navbar-right"&gt;
              &lt;li class="active"&gt;&lt;a href="./"&gt;Default&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="../navbar-static-top/"&gt;Static top&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="../navbar-fixed-top/"&gt;Fixed top&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
        &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS code:</p>
  
  <pre><code>.wrapper {width:100%, height:100%;} 
  </code></pre>
  
  <p>My jQuery function:</p>
  
  <pre><code>    $(document).ready(function () {
      function CloseNav() {
          $(".navbar-collapse").stop().animate({'height': 0},300, function () {
              $('.navbar-collapse').removeClass('in').addClass("collapse");
          });
          $(".navbar-toggle").stop().removeClass('collapsed');
      }
  
      $('html').click(function (event) {
          var clickover = $(event.target);
          var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
          if (_opened === true &amp;&amp; !clickover.hasClass("navbar-toggle")) {
              CloseNav();
          }
  
      });
  });
  </code></pre>