title: "active" class somehow being removed from ".caret"
body: <p>Even though in my mouseover function, it explicitly says to add the class <code>active</code> to <code>.caret</code> <em>(make it grey)</em> when "Dropdown" is hovered over and the dropdown menu hidden, when you click on "Dropdown" twice (once to show menu; once to hide) and still have your cursor over "Dropdown", the caret fails to change color (turn grey), which is odd.</p>
  
  <p>The only way to rectify this is by leaving the <code>&lt;span&gt;</code> element and then re-entering it, at which point, it turns grey as it should. However, I would like it to turn grey under every circumstance, as long as the span element is being hovered over and the dropdown is hidden.</p>
  
  <p>The problem nevertheless seems to be that the <code>active</code> class is being removed somewhere, whenever "Dropdown" is clicked on twice, but I don't know where.</p>
  
  <p>Anyone know how to fix this?</p>
  
  <p><a href="http://www.bootply.com/711DqjsqtS#" rel="nofollow">Bootply</a>.</p>
  
  <p>HTML:</p>
  
  <pre><code>   &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
              &lt;div class="container"&gt;
  
                  &lt;div class="collapse navbar-collapse navHeaderCollapse"&gt;
  
                      &lt;ul class="nav navbar-nav navbar-right"&gt;
  
  
                          &lt;li class="dropdown"&gt;   
                              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;&lt;span&gt;Dropdown&lt;/span&gt;&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                              &lt;ul class="dropdown-menu"&gt;
                                  &lt;li&gt;&lt;a href="#subtab1"&gt;1&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#subtab2"&gt;2&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;&lt;!-- END: "dropdown-menu" --&gt;      
                          &lt;/li&gt;&lt;!-- END: "dropdown" --&gt;
  
  
                      &lt;/ul&gt;&lt;!-- END: "nav navbar-nav navbar-right" --&gt;
                  &lt;/div&gt;&lt;!-- END: "collapse navbar-collapse navHeaderCollapse" --&gt;
              &lt;/div&gt;&lt;!-- END: "container" --&gt;
          &lt;/div&gt;&lt;!-- END: "navbar navbar-inverse navbar-fixed-top" --&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>span {
      color:#ffffff;  
  }
  span.active{
      color:#bdbcae;
  }
  .caret{
      color:#ffffff;
  }
   .caret.active{
       color:#bdbcae;
  }
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>/* START: ACCOMPLISHMENTS TELEPORT */
  var counter = 0;
  
  const EMPTY_COUNTER = 0, FULL_COUNTER = 2;
  
  var shouldOpen = function () {
  return counter === FULL_COUNTER;
  };
  
  var resetCounter = function () {
  counter = EMPTY_COUNTER;
  };
  
  var incrementCounter = function () {
  counter++;
  };
  
  
  $(document).on("click", "span", function (e) {
  
  e.preventDefault();
  if (counter==1 &amp;&amp; !$('.dropdown-menu').is(":visible")) {
      resetCounter();
  }
  incrementCounter();
  if (shouldOpen() || counter==1 &amp;&amp; $('.dropdown-menu').is(":visible")) {     
      $("span ").removeClass("active"); 
      resetCounter();
  } else {
      $( ".caret" ).removeClass( "active" );  
  }
  });
  /* END: ACCOMPLISHMENTS TELEPORT */
  
  /* START: CLICK ON SPAN/CARET  */
  $( "a.dropdown-toggle" ).mousedown(function() {
  if ($(event.target).closest("span").length) {
      if ($('.dropdown-menu').is(":visible") &amp;&amp; !$( ".dropdown" ).hasClass( "active" )) {
          $( "span" ).addClass( "active" );
      }   
      if (!$('.dropdown-menu').is(":visible")) {
          $( ".caret" ).addClass( "active" ); 
      }       
  } else {
      $( ".caret" ).addClass( "active" );
  }
  });
  /* END: SPAN/CARET ON CLICK */
  
  /* START: CARET ON HOVER */
  $(document).mouseover(function() {
  if ($(event.target).closest("a.dropdown-toggle").length) {
      if ($(event.target).closest("span").length) {   
          if (!$('.dropdown-menu').is(":visible")) {
              $( ".caret" ).addClass( "active" );
          } else {    
              $( ".caret" ).removeClass( "active" );
          }
      } else {
          $( ".caret" ).addClass( "active" );
          $( "span" ).removeClass( "active" );
      }       
  } else {    
          $( "span" ).removeClass( "active" );
          $( ".caret" ).removeClass( "active" );              
  }
  });
  /* END: CARET ON HOVER */
  </code></pre>