禁用单击主菜单项而不是子菜单jquery

HTML

<ul id="nav">
    <li>
        <a href="#">Home</a>
    </li>

    <li>
        <a href="#">About</a>
        <ul>
            <li><a href="#">The product</a></li>

            <li><a href="#">Meet the team</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Services</a>

        <ul>
            <li><a href="#">Sevice one</a></li>
            <li><a href="#">Sevice two</a></li>

            <li><a href="#">Sevice three</a></li>
            <li><a href="#">Sevice four</a></li>
        </ul>

    </li>
    <li>
        <a href="#">Product</a>
        <ul>
            <li><a href="#">Small product (one)</a></li>

            <li><a href="#">Small product (two)</a></li>
            <li><a href="#">Small product (three)</a></li>
            <li><a href="#">Small product (four)</a></li>

            <li><a href="#">Big product (five)</a></li>
            <li><a href="#">Big product (six)</a></li>
            <li><a href="#">Big product (seven)</a></li>

            <li><a href="#">Big product (eight)</a></li>
            <li><a href="#">Enourmous product (nine)</a></li>
            <li><a href="#">Enourmous product (ten)</a></li>

            <li><a href="#">Enourmous product (eleven)</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Contact</a>

        <ul>
            <li><a href="#">Out-of-hours</a></li>
            <li><a href="#">Directions</a></li>

        </ul>
    </li>
</ul>

---

正在尝试禁用单击主菜单项，如“关于”、“服务”等下拉菜单项。使用上面的代码，它只是禁用我的所有链接

要仅禁用顶层，请执行以下操作

$('#nav > a').click(function(e){
    e.preventDefault();
});

试试这个

$('#nav li > a').click(function(e){
  -----^-- need a space here... or else it will search for id="navli" ;
   e.preventDefault();

$('#nav li > a').click(function(e){
     if($(this).siblings('ul').length > 0){
         e.preventDefault();
     }
});

}))

已更新

使用

同级（'ul'）

查找其中的ul。。。如果长度大于0，则检查其是否有下拉列表。。不需要添加额外的类

试试这个

$('#nav li > a').click(function(e){
  -----^-- need a space here... or else it will search for id="navli" ;
   e.preventDefault();

$('#nav li > a').click(function(e){
     if($(this).siblings('ul').length > 0){
         e.preventDefault();
     }
});

---

为您的顶级链接提供不可单击的类，并添加以下脚本：

$('.not-clickable').click(function(e){
    e.preventDefault();
});

如果您有一个动态菜单，请尝试确定是否存在子菜单，如果存在，请将该类添加到顶级元素中

---

编辑：通过使用一个不可点击的类，你对未来也会更好。如果#nav li变成#nav2 li，您也需要更改javascript。

这也会禁用所有链接。必须使用此答案，但将代码更改为

$（'.not clickable>a'）