Question

我有一个包含子菜单的示例菜单，当我点击其中一个菜单时，它们各自的下拉菜单应该出现。我想知道怎么做而不会输入ID或类，因为在我正在做的项目中，我被要求将菜单下拉列表更改为可点击而不是悬停，我不想在每个li中添加一个id或class，因为它是一个相当长的垂直菜单。

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');
    });
});

FIDDLE

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

3 个答案: