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/