javascript – Jquery menu ul toggle

I have this menu:

           <ul id=\"submenu\" class=\"clearfix\">
                <li><a href=\"javascript:void(0)\">Vedella</a></li>
                <li><a href=\"javascript:void(0)\">Minis de vedella</a></li>
                <li><a href=\"javascript:void(0)\">Vaca</a></li>
                <li><a href=\"javascript:void(0)\">Poltre</a></li>
                <li><a href=\"javascript:void(0)\">Porc Ibèric</a></li>
                <li><a href=\"javascript:void(0)\">Pollastre</a></li>
                <li><a href=\"javascript:void(0)\">Gall d´indi</a></li>
                <li><a href=\"javascript:void(0)\">Bou</a></li>
            </ul>

Each of the \”#submenu\” li fadeIn an ul sublist and hide the other sublists.

This are the sublist:

            <ul class=\"sublist first_sublist\">
                <li><a href=\"javascript:void(0)\">Normal </a></li>
                <li><a href=\"javascript:void(0)\">All i Julivert</a></li>
                <li><a href=\"javascript:void(0)\">Formatge Roquefort</a></li>
                <li><a href=\"javascript:void(0)\">Ceba</a></li>
            </ul>

            <ul class=\"sublist second_sublist\">
                <li><a href=\"javascript:void(0)\">Mini-Hamburgueses</a></li>
                <li><a href=\"javascript:void(0)\">Surtit Mini-Hamburgueses</a></li>
            </ul>

            <ul class=\"sublist third_sublist\">
                <li><a href=\"javascript:void(0)\">Normal</a></li>
            </ul>

            <ul class=\"sublist fourth_sublist\">
                <li><a href=\"javascript:void(0)\">Poltre</a></li>
            </ul>

            <ul class=\"sublist fifth_sublist\">
                <li><a href=\"javascript:void(0)\">Porc ibèric de Gla</a></li>
            </ul>

and this css:

    .second_sublist, .third_sublist, .fourth_sublist, .fifth_sublist, .sixth_sublist{
        display: none;
    }

with this script:

$(\'#submenu li\').click{
    $(\'#submenu li\').removeClass(\'active\');
    $(this).addClass(\'active\');    
    $(\'.sublist.second_list\').hide();
    $(\'.sublist.first_list\').fadeIn();
});

The problem with the script is that it will get bigger if i have five sublists, cause i will have to make every click function per \”#submenu\” li.

Can someone help me to make it simple?

Rating: 4 out of 5 based on 4 ratings

Posts Related to javascript - Jquery menu ul toggle

• Aug 14th, 2012 jquery - Get state of checkbox using javascript Tuesday AM 09:52:26


• Jul 14th, 2012 jquery - Javascript drop-down menu not working Saturday AM 07:21:30


• Jul 15th, 2012 jquery - Javascript drop-down menu not working Sunday AM 10:12:04


• Aug 27th, 2012 Difference between jquery selectors Monday AM 00:19:37


• Nov 16th, 2012 jquery - one button one function on first click another on second Friday PM 16:27:25


• Jul 23rd, 2012 Combine multiple instances of jquery code Monday AM 06:30:39


• Jul 25th, 2012 javascript - delaying a statment in jquery? Wednesday AM 06:35:57


• Nov 15th, 2012 php - How to add custom code to specific <li>s in wordpress while building navigation? Thursday AM 11:44:50


• Nov 16th, 2012 php - How to add custom code to specific <li>s in wordpress while building navigation? Friday PM 18:16:53


• Jul 10th, 2012 PHP (or Javascript) Floating Header On/Off Tuesday AM 06:43:17

The post javascript – Jquery menu ul toggle appeared first on Javascript ASK.

via Javascript ASK http://javascriptask.phpfogapp.com/javascript-jquery-menu-ul-toggle.html