首页 文章

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

提问于
浏览 次
0

我有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类别可见，然后当我单击一个类别时，只有链接的子类别可见 .

请帮忙 .

jquery

2 回答

  • 0

    看到：Fiddle

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

    你可以尝试类似的东西

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

    演示：Fiddle

    回复于

相关问题