Question

I have a little problem with a navigation I’m making.

I want my navigation to slidedown with submenus and not link to anything, if they have childrens. And if a child is active (), then the parent should be active too, and automaticly show the children.
So far I made this work.

Now I want the parents to change class, if you click them. Toggle between .active and the ordinary style. I can only get the standard links to do so, and if you click a parent who’s not active, the parent who is active should slide up the children and become deactivated.

Anyone who can help me with this issue?

My code so far looks like this:

<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>

And my jQuery looks like this:

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

I’m not absolutely sure what you’re aiming to achieve. However if it’s simply that you’d like to change only the parents class to active then this should do the trick:

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;
            }
        }
    );
}

Here’s a jsfiddle for you: http://jsfiddle.net/XHCpg/