Question

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>

的jQuery

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

尝试禁用点击主菜单项，例如关于，服务等，他们有一个下拉列表。使用上面的代码，它只是禁用我的所有链接。

Answer 1

要仅停用顶级，请执行此操作...

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

Answer 2

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

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

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

编辑：通过使用.not-clickable类，您将来也会更好。如果#nav li成为＃nav2 li，你也需要更改你的javascript。

Answer 3

试试这个

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

}）;

<强>更新

使用siblings('ul')在其中查找ul ...检查长度是否大于0它有下拉列表..无需添加额外的类......

试试这个

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

fiddle here

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

3 个答案: