Question

我有3个部分。集团，类别，子类别。

有两组：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

请参阅：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();
});

演示：Fiddle

使用Jquery链接各种div以单击函数

2 个答案: