javascript - メニュー リンクにサブメニュー JavaScript があるかどうかを確認する

Question

クリックしたメニュー リンクにサブメニューがある場合にのみ、javascript (toggleClass) を実行しようとしています。これは可能ですか？よろしくお願いします。

$('#nav a').click(function () {
    if (???) {
        $(this).toggleClass('sf-js-enabled');
    }
});

Answer 1

hasセレクターを使用します。

$('#nav a:has(.submenu)').click(function () {
        $(this).toggleClass('sf-js-enabled');
    });

このようにして、jQuery は DOM を 1 回だけトラバースし、他のすべての回答のようにクリックするたびにトラバースすることはありません。

has ドキュメント:

説明: 指定されたセレクターに一致する要素を少なくとも 1 つ含む要素を選択します。

Answer 2

$('#nav a').click(function () {
    // Proceed only if children with your submenu class are present
    if ($(this).find('.submenuClass').length > 0) {
        $(this).toggleClass('sf-js-enabled');
    }
})

Answer 3

これを試して。

$('#nav a').click(function () {
    if ($(this).find('submenuSelector').length) {
        $(this).toggleClass('sf-js-enabled');
    }
})

has(selector)または、一致した要素のセットを、セレクターまたは DOM 要素に一致する子孫を持つ要素に減らすメソッドを使用できます。

$('#nav a').click(function () {
    //Do other suff here

    if ($(this).has('submenuSelector').length) {
        $(this).toggleClass('sf-js-enabled');
    }
})