Question

I need a little help with a script i modified.

I’ve created a submenu and now I want to remove the class .active_2 while hovering. If I remove the mouse class .active_2 should be added.

This is my code so far:

    $(function() {
      var $menu = $('#sub_nav');

      $menu.children('li').each(function(){
        var $this = $(this);
        var $span = $this.children('span');
        $span.data('width',$span.width());

        $this.bind('mouseenter',function(){
          $menu.find('.sub_nav_sub').stop(true,true).hide();
          $menu.find('.active_2').removeClass();
          $span.stop().animate({'width':'170px'},300,function(){
            $this.find('.sub_nav_sub').slideDown(300);
          });
          }).bind('mouseleave',function(){
            $this.find('.sub_nav_sub').stop(true,true).hide();
                            /* addClass here */
            $span.stop().animate({'width':$span.data('width')+'px'},300);
          });
      });
    });

CSS:

.active_2, .active_2 a {
  background: #FBD009;
  color: #000000!important;
}

HTML:

<ul id="sub_nav" class="sub_nav">
  <li class="active_2"><a href="aktuelles.html">News</a></li>

  <li><span>Termine</span>
    <ul class="sub_nav_sub">
      test
    </ul>
  </li>
</ul>

Removing Class works just fine but adding class isn’t working.
I’ve tried:

$(this).addClass('.active_2');

Edit:
I didn’t make a correct formulation of my problem, so here again:

I want to remember which li was active before and set it to the li when the mouse leaves the navigationbar.

For example: News is active. While hovering News it is not active anymore but all others li while sliding over. If I remove the mouse from the navigationbar News should be active again.

I thought that I should search for the li which has the class active_2 and then addClass active_2

$(this).find('li.active_2').addClass('active_2');

But this seems not to be the right choice. Any suggestions?

Answer 1

Adding and removing classes don’t need the dot…

$(this).addClass('active_2');