jQuery toggleclass导航

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/