Drop down menu toggle

Question

I'm making a site that's responsive. When the page is <=830px the look of the page changes.

I need help figuring out a way to toggle the sub menus one at a time. Wordpress generates the same .sub-menu class name for each submenu.

I'm using this code to toggle the menus but they both go at the same time. You will need to make the browser less than 830px to see what I'm talking about.

$(".about").click(function() {
    $(".sub-menu").slideToggle("fast");         
    return false;
}); //.click

$(".projects").click(function() {
    $(".sub-menu").slideToggle("fast");         
    return false;
}); //.click

Thank you for your help.

http://www.mackeyshotrods.com/store/?page_id=2

Answer 1

$(document).ready(function () {
    $("#na ul li").click(function () {
         $(this).siblings().find('ul').slideUp(400);
            $(this).find('ul').slideToggle('fast');         
    });
});

http://jsfiddle.net/7P3Df/1/

Answer 2

When you call $(".sub-menu").slideToggle("fast"); it applies to all the element which have the sub-menu class. To apply it only to the current element, call your method on $(this) :

     $(".about").click(function() {
        $(this).slideToggle("fast");         
        return false;
    }); //.click

    $(".projects").click(function() {
        $(this).slideToggle("fast");         
        return false;
    });

Answer 3

Rather than handling individual clicks you can use the following code

$(".menu-item").click(function(){ $(".sub-menu", $this).slideToggle("fast"); };