jquery - 使用 Jquery 链接各种 div 以单击功能

Question

我有 3 个部分。组、类别、子类别。

有 2 组：grp1、grp2 对于 grp1，有 3 个类别：grp1_C1、grp1_C2、grp1_C3 对于 grp 2，有 2 个类别：grp2_C1、grp2_C2

对于grp1_C1，有3个子类别：grp1_C1_S1、grp1_C1_S2等

所有部分都将从数据中动态获取，因此必须使用 jquery 完成链接等。

我想要做的是显示 2 个组按钮。当我单击任何组时，我想显示与其链接的类别，然后当我单击其中的任何类别时，我想显示其中的后续子类别。

我将为所有人创建 div。

<div id='group'>
    <div id='grp1' class="group"></div>
    <div id='grp2' class="group"></div>
</div>


<div id='cat'>
    <div id='grp1_cat' class="cat">
       <div id='grp1_cat1' class="cat"></div>
       <div id='grp1_cat2' class="cat"></div>
    </div>
    <div id='grp2_cat' class="cat">
       <div id='grp2_cat1' class="cat"></div>
       <div id='grp2_cat2' class="cat"></div>
    </div>
</div>

对于子类别也是如此。

现在，当我单击 group1 时，我只希望组 1 类别可见，然后当我单击一个类别时，只有链接的子类别可见。

请帮忙。

Answer 1

See this : Fiddle

$('#cat > .cat:not(:first)').hide();
$('#group').on('click', '.group', function(){
   $('#cat > .cat').hide();
   $('#' + this.id + '_cat').show();
});

Answer 2

你可以尝试类似的东西

$('#cat > .cat').hide();
$('#group').on('click', '.group', function(){
    $('#cat > .cat').hide();
    $('#' + $(this).attr('id') + '_cat').show();
});

演示：小提琴