在没有id的<ul>列表中获取子<ul>，在<ul> <li> <a>的第一级使用e.preventDefault（）

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 - 这是我抓住孩子的问题。

我的代码是这样的：

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

Answer 2

你可以通过检查点击的li是否嵌套在其中的任何ul来实现这一点。

$('#menu li').click(function(e) {

  $this = $(this);
  e.stopPropagation(); 

  if ($this.has('ul').length) {
    e.preventDefault();
    $('ul', this).fadeToggle();
  } 

});

这是一个演示