Question

I have problems with the active items of the menu and a submenu that toggles:
When I click over “Prensa” or “Contacto” the script adds the active well to menu item. For example “Prensa” gets the active and if I click on “Contacto”, it get’s the active removing it from “Prensa”.

The problem is when I click on “Artworks” it get’s the active class but also all the links from it’s submenu. Also if I click again over “Prensa” the submenu from “Artworks” stays open and all the links of “Artworks” still gets the active class (Also the “artworks” link itself).

Another problem is that when I click over a submenu item, it adds just a “class” without anything more, so I can’t add css to make it active.

Here it’s my markup:

        <ul id="menu" class="menu">
            <li id="artworks"><a href="#">ARTWORK</a>
                <ul class="submenu">
                    <img src="../img/submenu.png" alt="submenu" width="62" height="1" />
                    <li><a href="#" id="sweetlife">Sweet Life</a></li>
                    <li><a href="#">Pleasure</a></li>
                    <li><a href="#">Bienal de la habana</a></li>
                    <li><a href="#">Estudios de craneos</a></li>
                </ul>
            </li>
            <li id="prensa_nav"><a href="#">PRENSA</a></li>
            <li id="contacto_nav"><a href="#">CONTACTO</a></li>
        </ul>

Here it’s my js:

    // active menu item
$(function() {
    $('#menu li').click(function() {
        $('#menu li').each(function() {
            $(this).removeClass('active');
        });
        $(this).addClass('active');
    });
});


    /* Menu dropdown */
    $(document).ready(function($){

    // Add class of drop if item has sub-menu
    $('ul.submenu').closest('li').addClass('drop');

    // Left Sidebar Main Navigation
    var menu_ul = $('.menu > li.drop > ul'),
        menu_a  = $('.menu > li.drop > a');

    menu_ul.hide()    

    menu_a.click(function(e) {
        e.preventDefault();
        if(!$(this).hasClass('active')) {
            menu_a.removeClass('active');
            menu_ul.filter(':visible').slideUp('normal');
            $(this).addClass('active').next().stop(true,true).slideDown('normal');
        } else {
            $(this).removeClass('active');
            $(this).next().stop(true,true).slideUp('normal');
        }
    });

});

Can someone help me out to fix these problems?

Answer 1

You have to style only the direct child of an active menu an not all other children.

For the scripting, the click on a submenu is called twice: once on the child and once on the parent. First call sets the class on the child, but second call removes it instantly.
You can prevent this ‘propagation’ of the click in jQuery.

Example: http://jsfiddle.net/willemvb/q96FK/