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

About、Services などのドロップダウンがあるメイン メニュー項目のクリックを無効にしようとしています。上記のコードを使用すると、すべてのリンクが無効になります。

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

});

更新しました

その中のulを見つけるために使用siblings('ul')します...長さが0より大きい場合はドロップダウンがあります..余分なクラスを追加する必要はありません...

これを試して

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

ここでフィドル

于 2013-02-12T12:47:23.290 に答える