javascript - 在 <ul><li><a> 的第一级上获取没有 id 和 e.preventDefault() 的 <ul> 列表中的子 <ul>

Question

我有一些结构如下的菜单:

<ul id="menu">
    <li><a href="#"><span>First level link 1</span></a>
        <ul>
            <li><a href="#"><span>Child link 1</span></a></li>
            <li><a href="#"><span>Child link 2</span></a></li>
        </ul>
    </li>
    <li><a href="#"><span>First level link 2</span></a>
        <ul>
            <li><a href="#"><span>Child link 2</span></a></li>
            <li><a href="#"><span>Child link 2</span></a></li>
        </ul>
    </li>
</ul>

它只需要显示一级 ul li，没问题，但它需要通过点击二级链接来显示。我不能在 ul 或 li 中使用 id 或 rel attr - 这是我抓 child 的问题。

我的代码是这样的:

var menuRaw = $("ul#menu > li:lt(5)");

    menuRaw.click(function(e){
        e.preventDefault();

        var menuItem = $(this);

        menuRaw.removeClass("selected");
        menuItem.addClass("selected");

        $('#menu ul').hide();
        menuItem.find("ul").show();
    }

它有效，但 e.preventDefault() 阻止了菜单中的所有链接(但在二级链接需要像往常一样工作链接)

抱歉我的英语不好，这是关于 stackoverflow 的第一个问题。

Answer 1

您可以为每个级别选择和处理点击，例如:

// first level links
$("ul#menu > li > a").click(function() {
    e.preventDefault();

    // show sub-menu etc..
}

// second level links (remove this block if you dont want any spl processing here)
$("ul#menu > li > ul > li > a").click(function() {
    return true; // behave like normal links
});