我试图实现与外中继器表示类别嵌套中继器（最初折叠），并且当用户点击+或 - 内中继器展开/折叠。
我有中继器，但是当我点击+两内中继器扩展。 我试图动态设置类名称，这样只有一个将扩大，但现在它看到我把它弄坏了。
这是我有什么，我都试过（减去无关的东西）：
<asp:Repeater runat="server" ID="rptCategoryList" OnItemDataBound="rptCategoryList_ItemDataBound">
<ItemTemplate>
<div style="font-size: 120%">
<%# Eval("CourseCategory")%>
<i id="br-plus" class="fa fa-plus-circle" style="color: #3697EA; margin-left: 1%; margin-top: 60px;" data-cat="<%# Eval("Abbrev")%>"></i>
<i id="br-minus" class="fa fa-minus-circle" style="color: #3697EA; margin-left: 1%; margin-top: 60px; display: none;"></i>
</div>
<div class="row">
<asp:Repeater runat="server" ID="rptCourses" OnItemDataBound="rptCourses_ItemDataBound" OnItemCommand="rptCourses_ItemCommand">
<HeaderTemplate>
<table class='<%# Eval("Abbrev")%>' style="display: none; margin-top: 10px; font-size: 26px; width: 90%;">
</HeaderTemplate>
<ItemTemplate>
<tr style="border-top: 1px solid #000;">
<td style="padding-top: 30px;">
</td>
...
<td style="padding-top: 30px;">
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
</ItemTemplate>
</asp:Repeater>
我尝试添加一个数据属性+和 - 图标（数据-CAT），使用类别相同的值在内部转发器表（设置它的类是类别名称），并在jQuery的展开和折叠此基础上加/减去被点击。
当我查看源代码，图标有正确的数据属性（正确类别的缩写），但表的类名是空白。
$(function () {
$('#br-plus').on('click', function () {debugger
var cat = $('#br-plus').data("cat")
//var catID = $('#hfCategoryID').val();
$('.' + cat).toggle();
$(this).hide();
$('#br-minus').show();
});
$('#br-minus').on('click', function () {debugger
//var catID = $('#hfCategoryID').val();
var cat = $('#br-minus').data("cat")
$('.' + cat).toggle();
$(this).hide();
$('#br-plus').show();
});
更新-查看源代码的结果
$(function() { //$('.courses').hide(); $('#br-plus').on('click', function() { debugger var cat = $(this).data("cat") //var catID = $('#hfCategoryID').val(); $('.' + cat).toggle(); $(this).hide(); $('#br-minus').show(); $(this).siblings().show(); }); $('#br-minus').on('click', function() { debugger //var catID = $('#hfCategoryID').val(); var cat = $(this).data("cat") $('.' + cat).toggle(); $(this).hide(); $('#br-plus').show(); $(this).siblings().hide(); }); $('#net-plus').on('click', function() { $('.courses-net').toggle(); $(this).hide(); $('#net-minus').show(); }); $('#net-minus').on('click', function() { $('.courses-net').toggle(); $(this).hide(); $('#net-plus').show(); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div style="font-size: 120%"> Delivery Operations <i id="br-plus" class="fa fa-plus-circle" style="color: #3697EA; margin-left: 1%; margin-top: 60px;" data-cat="DelOps">+</i> <i id="br-minus" class="fa fa-minus-circle" style="color: #3697EA; margin-left: 1%; margin-top: 60px; display: none;" data-cat="DelOps">-</i> </div> <div class="row"> <!-- This is where the content of inner repeater is; note emply class name --> <table class='' style="display: none; margin-top: 10px; font-size: 26px; width: 90%;"> <tr style="border-top: 1px solid #000;"> <td style="padding-top: 30px;"> </td> <td style="text-align: center;"> </td> </tr> <tr style="border-top: 1px solid #000;"> <td style="padding-top: 30px;"> </td> <td style="text-align: center;"> </td> </tr> </table> </div> <div style="font-size: 120%"> Network Operations <i id="br-plus" class="fa fa-plus-circle" style="color: #3697EA; margin-left: 1%; margin-top: 60px;" data-cat="NetOps">+</i> <i id="br-minus" class="fa fa-minus-circle" style="color: #3697EA; margin-left: 1%; margin-top: 60px; display: none;" data-cat="NetOps">-</i> </div> <div class="row"> <table class='' style="display: none; margin-top: 10px; font-size: 26px; width: 90%;"> <tr style="border-top: 1px solid #000;"> <td style="padding-top: 30px;"> </td> <td style="text-align: center;"> </td> </tr> <tr style="border-top: 1px solid #000;"> <td style="padding-top: 30px;"> </td> <td style="text-align: center;"> </td> </tr> </table> </div> </body> 
