0

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

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

4

3 回答 3

4

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

$('#nav > a').click(function(e){
    e.preventDefault();
});
于 2013-02-12T12:46:21.857 回答
3

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

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

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

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

于 2013-02-12T12:52:55.147 回答
1

试试这个

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

});

更新

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

试试这个

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

在这里摆弄

于 2013-02-12T12:47:23.290 回答