如何點擊沒有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');
    });
});

小提琴