jquery - jQuery展开独特的子菜单

Question

我的项目有一些类名相同的 li 元素（.expanded）

我的目标是当用户按 Tab 键时，显示 li.expaned 下的隐藏子菜单。

现在的问题是当我按下tab键时，所有的子菜单都会显示出来。如何一一显示？

$(document).ready(function () {
    $('.expanded').keyup(function (e) {
        $('.expanded').each(function () {
            console.log('keyup called');
            var code = e.keyCode || e.which;

            if (code == '9') {
                //jQuery(this).children('.side_menu_sub li ul').css("display", "block");
                $(this).children('.side_menu_sub li ul').css("display", "block");
            }
        });
    });
});

Answer 1

尝试这个：

$(this).find('> .side_menu_sub > li > ul').css("display", "block");

您可以随时检查您选择了哪些元素console.log。只需使用 css 选择器即可。

此外，将重用的 jQuery 对象存储在变量中也是一个好习惯。您应该使用on而不是特定功能。结果将是：

$(document).ready(function () {
    expanded = $('.expanded');
    expanded.on('keyup', function (e) {
        expanded.each(function () {
            console.log('keyup called');
            var code = e.keyCode || e.which;

            if (code == '9') {
                //jQuery(this).children('.side_menu_sub li ul').css("display", "block");
                $(this).find('> .side_menu_sub > li > ul').css("display", "block");
            }
        });
    });
});