jquery - 如何在没有 id 或 class 的情况下点击特定的 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');
    });
});

但它对我有用