How can I click a specific li without an id or class?

Question

I have a sample menu with sub-menus, when I click one of them, their respective drop down should appear. I want to know how to do it without putting an id or class because In the project I'm doing right now, I am asked to change the menu dropdown to be clickable instead of hover and I don't want to add an id or class in each of the li because it's a pretty long vertical menu.

HTML

<ul id="nav">
<li>Home
    <ul class="sub-nav">
        <li>Johnny</li>
        <li>Julie</li>
        <li>Jamie</li>
    </ul>
</li>
<li class="parent">About
    <ul class="sub-nav">
        <li>Johnny</li>
        <li>Julie</li>
        <li>Jamie</li>
    </ul>
</li>
<li>Contact</li>

CSS

#nav ul.sub-nav {
  display: none;
}

#nav ul.visible {
  display: block;
}

jQuery

$(document).ready(function() {
    $('ul li').click(function() {
        $('ul li ul').toggleClass('visible');
    });
});

http://jsfiddle.net/cRsZE/

Answer 1

not sure if this is what you want.

$(document).ready(function() {
    $('li').click(function() {
        $(this).find('ul').toggleClass('visible');
    });
});

But it works for me

Answer 2

JS

$(document).ready(function() {
        $('ul > li').click(function() {

            $(this).children('ul').toggleClass('visible');
        });
    });

DEMO

Answer 3

Try this, .children() will fetch the immediate children of current li element:

$(document).ready(function() {
    $('li').click(function() {
        $(this).children('ul').toggleClass('visible');
    });
});

FIDDLE