1

正常に動作しているように見えるスライド メニューがあります。リンクを選択すると正常に動作し、子を持つリンクを選択すると preventdefault() が起動し、スクロールします。子、私は今のところ満足していますが、子がもういないのでリンクの最後に到達すると、リンクは通常どおり機能するはずですが、機能しません。

ここにjqueryがあります

$(".menu li").click(function(e) {
    if($(this).children('.sub-menu').length > 0) {
        e.preventDefault();
        $(this).children('.sub-menu').addClass('open');
    }
    else  {
        $(".menu li").ready(function(){
            return true;
        });
    }
});

私はそれが機能するフィドルも添付しました。

http://jsfiddle.net/R6wHG/16/

4

2 に答える 2

5

問題は、イベント ハンドラーを<li>要素にバインドしていて、要素をクリックすると<a>DOM に伝播することです。リンクをクリックすると、そのリンクから (サブメニューを含まない) までバブルし、最終的にはサブメニューを含む別のリンクまでバブルし、その<li>時点でそのクリックのデフォルトの動作になります。イベント（リンクをたどる）が抑制されます。イベント ハンドラーを要素自体にバインドし、次の要素が1かどうかを確認します。<li><a>.sub-menu

$(".menu a").click(function (e) {
    if ($(this).next('.sub-menu').length > 0) {
        e.preventDefault();
        $(this).next('.sub-menu').addClass('open');
    }
});

更新されたjsFiddle

于 2013-10-17T12:14:34.817 に答える
3

また、親要素で呼び出されたstopPropagation()ようにする必要があります。preventDefault()li

$(".menu li").click(function (e) {
    e.stopPropagation();
    if ($(this).children('.sub-menu').length > 0) {
        e.preventDefault();
        $(this).children('.sub-menu').addClass('open');
    }
});

フィドルの例

return true冗長であるため、私も削除したことに注意してください。

于 2013-10-17T12:14:28.677 に答える