0

私はいくつかのjQueryを試しましたが、スライドメニューを機能させる方法を理解したいと思っています. にクラス「ドロップダウン」があり<ul>ます。クリックしたすべての のサブメニューが表示され<a>ます。サブメニュー<ul>には、クラス「サブメニュー」が指定されています。

私はこの仕事をするのにかなり遠くまで来ました。ここで確認したいのは、サブメニュー項目がクリックされたときに通常どおりに動作することだけです。これは preventDefault によって防止されるようになりました。きちんとした機能ですが、サブメニューの場合は無効にしたいです<a>。

次のコードがあります。

$(document).ready(function () {
    $('.dropdown > li').click(function () {
        var $el = $('ul', this); // element to toggle
        $('.dropdown > li > ul').not($el).slideUp();
        $(this).find('.sub-menu ').slideToggle();
    });
    $('.dropdown > li').children().children().click(function (e) {
        return false;
    });
    $(".dropdown > li > a").click(function (e) {
        e.preventDefault();
    });
});

メイン メニューの通常のルーチンを回避するために preventDefault を追加し、サブメニューの slideToggle アクションを無効にしました。

ここで、サブメニューのデフォルトの動作を追加したいと思います<a>。彼らは今のところ何もしていません。

編集：JQueryの「not」ビットを見つけました。それを機能させようとしています（まだ満足のいく答えが得られていないため）。私が望むのは、クラス「サブメニュー」に属するすべてのを、サブメニューをスライドさせる機能から除外することです。私が思いついた構文は次のとおりです。

$('.dropdown > li').not('ul.sub-menu > li > a').click(function() {
}

しかし、うまくいきません。その中にある をクリックすると、機能が実行されます。では、上記の関数が 内にある場合を除いて常に実行されるようにするには、上記のコードをどのように言い換えればよいでしょうか?

4

3 に答える 3

0

次のように、最初の要素または指定された要素に対して実行できます。

$(document).ready(function () {
    $('.menu-item').bind('click', function () {
        if($(this).children('ul').length =0){      
            return false;      
        }
       else{
           $(this).children('.sub-menu ').slideToggle();
           return false;
       }    
    });
});

IF HTML コードは次のようになります。

<ul class="dropdown">
    <li class="menu-item">
        <a href="#">
      ITEM1
        </a>
    </li>
    <li class="menu-item">
        <a href="#">
      ITEM2
        </a>
        <ul class="sub-menu" >
            <li class="menu-item">
                <a href="#">
                  SUBITEM1
                </a>
            </li>
            <li class="menu-item">
              <a href="#">
                 SUBITEM2
              </a>
            </li>
        </ul>
    </li>
</ul>

デモの場合: http://jsfiddle.net/Pgm7G/16/

于 2013-05-07T16:15:27.060 に答える
0

私がコメントしたように、

$('.dropdown > li').children().children().click(function (e) {
    return false;
});

はサブメニュー リンクを選択してreturn falseおり、 は と同じ効果がありe.preventDefault()ます。

そのビットを取り出すだけです

于 2013-05-07T16:32:17.623 に答える