【发布时间】：2019-03-07 19:51:00
【问题描述】：
我正在尝试实现一个嵌套中继器，其中外部中继器显示类别（最初折叠）并且当用户单击 + 或 - 内部中继器展开/折叠时。
我有中继器，但是当我单击 + 时，两个内部中继器都展开了。我试图动态设置类名，所以只有一个会扩展，但现在它看到我打破了它。
这就是我所拥有和尝试过的（减去不相关的东西）：
<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>
我尝试向 + 和 - 图标（data-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>【问题讨论】：
-
试试
var cat = $(this).data("cat")，这样你就可以得到刚刚被点击的cat。如果这不能解决您的问题，请同时发布网页的源代码，以便我们可以准确了解 javascript 正在使用的内容。 -
另外你可能想使用
$(this).siblings().show();，所以你只显示刚刚被点击的兄弟姐妹。 -
我尝试了这两个建议，但都不起作用。顶部中继器中第一项中的 + 更改为 - 并返回为 +，但没有展开或折叠任何内容。顶部转发器中的第二个项目（类别）不响应点击 +。请参阅页面“查看源代码”的更新。
标签： jquery asp.net .net-4.5 repeater collapsable