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

现在我无法想象的是，当我点击Range选项卡（第一列）时，我希望显示它的孩子SubRanges（就像今天在第二列中一样），但是使用第一个SubRange选项卡激活dy默认（以便其内容也显示在第三列）。这样，当您单击“范围”选项卡时，您会看到SubRange和SubRange内容列在所选范围的函数中进行了上下文化。

Answer 1

在我的小提琴中查看：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');
});

Answer 2

我已经通过使用span标签折叠我的项目然后拥有这个JS来找到我自己的解决方案：

$('.first > li span').click(function() {
    $('.first > li, .first > li .second > li').removeClass('active');
    $(this).parents('li').addClass('active');
    $(this).parent().find('ul li:first-child').addClass('active');
});
$('.first li .second > li span').click(function() {
    $(this).parents('li').addClass('active');
});

见这里：https://jsfiddle.net/kL8eeh94/2/

jQuery选项卡子菜单有3个级别

2 个答案: