javascript - 具有 3 个级别的 jQuery 选项卡子菜单

Question

对于我的一个元素，我有一个子菜单，它使用 3 级选项卡来显示 3 列中的内容(Ranges/SubRanges/SubRanges 内容)。

在这里查看 jsfiddle:https://jsfiddle.net/kL8eeh94/1/

这是我当前的 jQuery :

$('.first > li').click(function() {
    $('.first > li').removeClass('active');
    $(this).addClass('active');
});
$('.first li .second > li').click(function() {
    $('.first > li > .second > li').removeClass('active');
    $(this).addClass('active');
});

现在我想不通的是，当我单击“范围”选项卡(第一列)时，我希望显示它的子级子范围(就像今天在第二列中一样)，而且第一个 SubRange 选项卡在默认情况下处于事件状态(因此其内容也显示在第三列)。这样，当您单击范围选项卡时，您会看到根据所选范围的功能上下文化的子范围和子范围内容列。

Answer 1

在我的 fiddle 中查看:https://jsfiddle.net/732bLcso/

切换第一个选项卡的子菜单和第一个 ul 的第一个子菜单:

$('.first > li.active:first').click(function() {
  $('.second:first, ul.second:first .third:first').toggleClass('active');
});

切换第二个选项卡的子菜单和第一个 ul 的第一个子菜单:

$('.first > li.active:nth-child(2n)').click(function() {
    $(this).children('.second').toggleClass('active');
    $(this).children('ul.second:first').find('.third:first').toggleClass('active');
});