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

jQuery扩展了独特的子菜单

1 个答案: