jQuery Forum

Hello,
I'm trying to simulate the continuity of a section by keeping the parent li highlighted in my menu. For that, I put the child when there is one as hidden. In my Jquery code, I managed to do what I want for the fist item but for the others it doesn't work and my buttons next and previous stay blocked. Do you have any idea how to resolve my problem.
HERE MY FIDDLE

My HTML looks like this :

1. <div id="cssmenu">
2.     <ul id="list">
3.         <li id="item1"><a href="#home">Home</a></li>
4.         <ul class="hide">
5.             <li><a href="#home2"></a></li></ul>
6.         <li id="item3"><a href="#newsletter">Newsletter</a></li>

For my Jquery code I did something like that :

1. $('#cssmenu').find('li').click(function(){
      //removing the previous selected menu state
      $('#cssmenu').find('li.active').removeClass('active');
   
       //is this element from the second level menu?
       if($(this).closest('ul').hasClass('hide')){
            $(this).parents('li').addClass('active');
   
       //this is a parent element
       }else{
            $(this).addClass('active');
       }
   });
2. $(function () {
           var
               animation = function ( href ) {
                   var
                       name = "active",
                       element = $( "a[href='" + href + "']" );
                  
                   $( "html, body" ).stop().animate( {
                       scrollLeft: $( href ).offset().left
                   }, 1200 );
                  
                   element.closest( "ul" ).find( "li" ).removeClass( name );
                   element.parent().addClass( name );
               },
               menu = $( "#list" );
              
           animation( menu.find( "li" ).eq( 0 ).find( "> a" ).attr( "href" ) );
          
           $( "#cssmenu a" ).bind( "click", function( event ) {
               var target = $( this ).attr("href");
              
               animation( target );
              
               event.preventDefault();
           } );
          
           $( "#next, #prev" ).click( function ( event ) {
               var
                   positionActiveClass = menu.find( "> li.active" ).index(),
                   menuLength = menu.find( "> li" ).length - 1,
                   buttonId = $( this ).attr( "id" );
              
               if ( buttonId === "next" ) {
                   if ( positionActiveClass === ( menuLength ) ) {
                       newElementActiveClass = menu.find( "li" ).eq( 0 );
                       newPositionActiveClass = newElementActiveClass.find( "> a" ).attr( "href" );
                      
                       animation( newPositionActiveClass );
                   } else {
                       newElementActiveClass = menu.find( "li" ).eq( positionActiveClass + 1 );
                       newPositionActiveClass = newElementActiveClass.find( "> a" ).attr( "href" );
                      
                       animation( newPositionActiveClass );
                   }
               } else {
                   if ( positionActiveClass === 0 ) {
                       newElementActiveClass = menu.find( "li" ).eq( menuLength );
                       newPositionActiveClass = newElementActiveClass.find( "> a" ).attr( "href" );
                      
                       animation( newPositionActiveClass );
                   } else {
                       newElementActiveClass = menu.find( "li" ).eq( positionActiveClass - 1 );
                       newPositionActiveClass = newElementActiveClass.find( "> a" ).attr( "href" );
                      
                       animation( newPositionActiveClass );
                   }
               }
              
               event.preventDefault();
           } );
          
       } );
   

Hello,

Hey there,