jQuery toggleclass navigation

Question

У меня есть небольшая проблема с навигацией, которую я создаю.

Я хочу, чтобы моя навигация была скопирована подменю, а не ссылка на что-либо, если у них есть дети. И если ребенок активен(), то родитель должен также быть активным и автоматически показывать детям. До сих пор я делал эту работу.

Теперь я хочу, чтобы родители меняли класс, если вы нажмете на них. Переключитесь между .active и обычным стилем. Я могу получить только стандартные ссылки, и если вы нажмете родителя, который неактивен, родитель, который активен, должен раздвинуть детей и деактивироваться.

Любой, кто может помочь мне в этом вопросе?

Мой код до сих пор выглядит следующим образом:

<ul class="menu collapsible expandactive" id="products"> 
    <li class="item"><a href="#" >Tryksager</a> 
    <ul> 
     <li><a href="#">A3/A4 Plakater</a></li> 
     <li><a href="#">Blokke</a></li> 
     <li><a href="#">Brevpapir</a></li> 
     <li><a href="#">Flyers/l&oslash;sark</a></li> 
     <li><a href="#">Foldere</a></li> 
     <li><a href="#">Kuverter</a></li> 
     <li><a href="#">Visitkort</a></li> 
    </ul> 
    </li> 
    <li class="item active parent"><a href="#" >Storformat print</a> 
    <ul> 
     <li><a href="#">Plakater</a></li> 
     <li><a href="#">Canvas/L&aelig;rred</a></li> 
     <li class="active"><a href="#">Klisterm&aelig;rker</a></li> 
     <li><a href="#">Folie</a></li> 
     <li><a href="#">Rollup System</a></li> 
    </ul> 
    </li> 
    <li class="item"><a href="#" >Grafisk Design</a></li> 
    <li class="item"><a href="#" >Hjemmesider</a></li> 
    <li class="item"><a href="#" >G&oslash;r Det Selv</a></li> 
    <li class="item"><a href="#" >Om Trykkeriet</a></li> 
    <li class="item"><a href="#" >Diverse</a></li> 
</ul> 

И мой JQuery выглядит следующим образом:

function initProducts() { 
$('ul#products ul').hide(); 
$.each($('ul#products'), function(){ 
    $('#' + this.id + '.expandactive li.active ul').show(); 
}); 
$('ul#products li a').click(
    function() { 
     var checkElement = $(this).next(); 
     var parent = this.parentNode.parentNode.id; 

     if($('#' + parent).hasClass('noaccordion')) { 
      $(this).next().slideToggle('normal').removeClass('active'); 
      return false; 
     } 
     if((checkElement.is('ul')) && (checkElement.is(':visible'))) { 
      if($('#' + parent).hasClass('collapsible')) { 
       $('#' + parent + ' ul:visible').slideUp('normal'); 
      } 
      return false; 
     } 
     if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { 
      $('#' + parent + ' ul:visible').slideUp('normal'); 
      checkElement.slideDown('normal'); 
      return false; 
     } 
    } 
); 
} 
$(document).ready(function() {initProducts();}); 

Answer 1

Я не совсем уверен, что вы стремитесь достичь. Однако, если это просто, что вы хотели бы изменить только класс родителей к активной, то это следует сделать трюк:

function initProducts() { 
    $('ul#products ul').hide(); 
    $.each($('ul#products'), function(){ 
     $('#' + this.id + '.expandactive li.active ul').show(); 
    }); 
    $('ul#products li a').click(
     function() { 
      var checkElement = $(this).next(); 
      var parent = this.parentNode.parentNode.id; 

      if($('#' + parent).hasClass('noaccordion')) { 
       $(this).next().slideToggle('normal').removeClass('active'); 
       return false; 
      } 
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) { 
       if($('#' + parent).hasClass('collapsible')) { 
        $('#' + parent + ' ul:visible').slideUp('normal'); 

        // ADDED CODE 
        $(this).parent().removeClass("active"); 
        $(this).parent().find("li").removeClass("active"); 
        // END 
       } 
       return false; 
      } 
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { 
       $('#' + parent + ' ul:visible').slideUp('normal'); 
       checkElement.slideDown('normal'); 

       // ADDED CODE 
       $(this).parent().addClass("active"); 
       // END 

       return false; 
      } 
     } 
    ); 
} 

Вот jsfiddle для вас: http://jsfiddle.net/XHCpg/