jQuery and selecting the next list items objects

Question

I have a nav built with a list and sub nav as lists inside a parent list. The sub nav resides in the next list item to it's corresponding main nav link:

This sits in a div with an id of 'nav'

<ul>
<li><a href="#">Nav main 1</a></li>
<li>
    <ul>
        <li>sub 1</li>
        <li>sub 2</li>
        <li>sub 3</li>
        <li>sub 4</li>
    </ul>
</li>
<li><a href="#">Nav main 2</a></li>
<li>
    <ul>
        <li>sub 1</li>
        <li>sub 2</li>
        <li>sub 3</li>
        <li>sub 4</li>
    </ul>
</li>
</ul>

Currently I have the following jquery:

$(document).ready(function() {
$("#nav ul li a[href^='#']").each(function(){ 
    if ($(this).next().is(':visible')) {
            $(this).next().hide();
 } else {
$("#nav ul li a[href^='#']").each(function(){ 
$(this).next().hide();
 });

$(this).next().show();
}
});

I thought this would work to make all the sub menu's hide and then show the one that had been clicked on. For some reason nothing happens. I have checked the console (firebug) and there is no error shown.

Getting frustrated with it now! :-/

EDIT: Here is the answer:

$(document).ready(function() {
$("#nav ul li a[href^='#']").each(function(){ 
$(this).parent().next().hide();
  $(this).click(function() {

        if ($(this).parent().next().is(':visible')) {
            $(this).parent().next().hide();

        } else {
            $("#nav ul li a[href^='#']").each(function(){ 
            $(this).parent().next().hide();

         });
        //then reshow and label the clicked nav
        $(this).parent().next().show();
        }

    });
    });

});

Answer 1

HTML:

<div id="nav">
    <ul>
        <li>
            <a href="#">Nav main 1</a>
            <ul>
                <li>sub 1</li>
                <li>sub 2</li>
                <li>sub 3</li>
                <li>sub 4</li>
            </ul>
        </li>
        <li>
            <a href="#">Nav main 2</a>
            <ul>
                <li>sub 1</li>
                <li>sub 2</li>
                <li>sub 3</li>
                <li>sub 4</li>
            </ul>
        </li>
    </ul>
</div>

JavaScript:

var s = $('#nav ul ul').hide();

$('#nav a').click(function() {
    var u = $(this).next();

    u.is(':visible') ? u.hide() : ( s.hide(), u.show() );    
    return false;
});

Live demo: http://jsfiddle.net/Tq6LM/1/

Answer 2

Never mind... I have figured it out. Writing it out again must have helped. I needed to call the .parent() Seems that i was trying to call the next a href, i needed to call the next list!

Answer 3

• DEMO: http://so.devilmaycode.it/jquery-and-selecting-the-next-list-items-objects

your Javascript Code should be:

$(function() {
    $('#main-nav li').click(function(e) {
        e.preventDefault();
        $('#main-nav li ul').slideUp(500);
        $(this).find('ul:not(:visible)').slideDown(500);
    });
});

little bit of CSS

#main-nav li ul { display:none }

your HTML should look like this:

<ul id="main-nav">
<li><a href="#">Nav main 1</a>
    <ul>
        <li>sub 1</li>
        <li>sub 2</li>
        <li>sub 3</li>
        <li>sub 4</li>
    </ul>
</li>
<li><a href="#">Nav main 2</a>
    <ul>
        <li>sub 1</li>
        <li>sub 2</li>
        <li>sub 3</li>
        <li>sub 4</li>
    </ul>
</li>
</ul>