如何点击没有id或类的特定li？

Question

我有一个包含子菜单的示例菜单，当我点击其中一个菜单时，它们各自的下拉菜单应该出现。 我想知道如何在不添加id或类的情况下执行此操作，因为在我正在进行的项目中，我被要求将菜单下拉列表更改为可点击而不是悬停，我不想添加ID或每个li中都有一个类，因为它是一个相当长的垂直菜单。

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

不确定这是不是你想要的。

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

但它对我有用

Answer 2

JS

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

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

DEMO

Answer 3

试试这个， .children()将获取当前li元素的直接子元素：

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

小提琴