在沒有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();
  } 

});

這是一個演示