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 一次，而不是像你得到的所有其他答案那样每次点击。

has 文档：

描述：选择至少包含一个与指定选择器匹配的元素的元素。

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