Expand/Collapse 嵌套中继器
Expand/Collapse Nested Repeater
我正在尝试实现一个嵌套中继器，其中外部中继器显示类别（最初折叠），当用户单击 + 或 - 内部中继器时 expands/collapses。
我有中继器，但是当我点击 + 时，两个内部中继器都展开了。我试图动态设置 class 名称，因此只有一个会扩展，但现在它看到我破坏了它。
这是我所拥有的和我尝试过的（减去不相关的东西）：
<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），对内部转发器中的 table 使用相同的类别值（将其 class 设置为类别名称），并在 jQuery 中根据单击 plus/minus 展开和折叠。
当我查看源代码时，图标具有正确的数据属性（正确的类别缩写）但是 table 的 class 名称是空白的。
$(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>
您仍然需要将 $(this).siblings().hide(); 更改为 $(this).siblings().show();。这可以让你摆脱 $('#br-plus').show(); $('#br-minus').show();
另外，因为你有多个 br-plus/br-minus 元素，你不能在它们上面使用 id 到 select，你会想要使用它作为 class 而不是：
$('.br-minus').on('click', function() {
debugger
//var catID = $('#hfCategoryID').val();
var cat = $(this).data("cat")
$('.' + cat).toggle();
$(this).hide();
$(this).siblings().show();
});
编辑： 我在 class 处找到了空白的解决方案
Accessing parent data in nested repeater, in the HeaderTemplate。为了从内部转发器获取 Abbrev，您需要引用您所在容器的父级。
...
<div class="row">
<asp:Repeater runat="server" ID="rptCourses" OnItemDataBound="rptCourses_ItemDataBound" OnItemCommand="rptCourses_ItemCommand">
<HeaderTemplate>
<table class='<%# ((RepeaterItem)Container.Parent).Abbrev %>' style="display: none; margin-top: 10px; font-size: 26px; width: 90%;">
</HeaderTemplate>
...
一旦 class 开始工作，它应该如下所示：
$(function() {
//$('.courses').hide();
$('.br-plus').on('click', function() {
debugger
var cat = $(this).data("cat")
//var catID = $('#hfCategoryID').val();
$('.' + cat).toggle();
$(this).hide();
$(this).siblings().show();
});
$('.br-minus').on('click', function() {
debugger
//var catID = $('#hfCategoryID').val();
var cat = $(this).data("cat")
$('.' + cat).toggle();
$(this).hide();
$(this).siblings().show();
});
$('#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 class="br-plus" class="fa fa-plus-circle" style="color: #3697EA; margin-left: 1%; margin-top: 60px;" data-cat="DelOps">+</i>
<i class="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='DelOps' style="display: none; margin-top: 10px; font-size: 26px; width: 90%;">
<tr style="border-top: 1px solid #000;">
<td style="padding-top: 30px;">
td 1.1.1
</td>
<td style="text-align: center;">
td 1.1.2
</td>
</tr>
<tr style="border-top: 1px solid #000;">
<td style="padding-top: 30px;">
td 1.2.1
</td>
<td style="text-align: center;">
td 1.2.2
</td>
</tr>
</table>
</div>
<div style="font-size: 120%">
Network Operations
<i class="br-plus" class="fa fa-plus-circle" style="color: #3697EA; margin-left: 1%; margin-top: 60px;" data-cat="NetOps">+</i>
<i class="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='NetOps' style="display: none; margin-top: 10px; font-size: 26px; width: 90%;">
<tr style="border-top: 1px solid #000;">
<td style="padding-top: 30px;">
td 2.1.1
</td>
<td style="text-align: center;">
td 2.1.2
</td>
</tr>
<tr style="border-top: 1px solid #000;">
<td style="padding-top: 30px;">
td 2.2.1
</td>
<td style="text-align: center;">
td 2.2.2
</td>
</tr>
</table>
</div>
</body>
我正在尝试实现一个嵌套中继器，其中外部中继器显示类别（最初折叠），当用户单击 + 或 - 内部中继器时 expands/collapses。
我有中继器，但是当我点击 + 时，两个内部中继器都展开了。我试图动态设置 class 名称，因此只有一个会扩展，但现在它看到我破坏了它。
这是我所拥有的和我尝试过的（减去不相关的东西）：
<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），对内部转发器中的 table 使用相同的类别值（将其 class 设置为类别名称），并在 jQuery 中根据单击 plus/minus 展开和折叠。
当我查看源代码时，图标具有正确的数据属性（正确的类别缩写）但是 table 的 class 名称是空白的。
$(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>
您仍然需要将 $(this).siblings().hide(); 更改为 $(this).siblings().show();。这可以让你摆脱 $('#br-plus').show(); $('#br-minus').show();
另外，因为你有多个 br-plus/br-minus 元素，你不能在它们上面使用 id 到 select，你会想要使用它作为 class 而不是：
$('.br-minus').on('click', function() {
debugger
//var catID = $('#hfCategoryID').val();
var cat = $(this).data("cat")
$('.' + cat).toggle();
$(this).hide();
$(this).siblings().show();
});
编辑： 我在 class 处找到了空白的解决方案
Accessing parent data in nested repeater, in the HeaderTemplate。为了从内部转发器获取 Abbrev，您需要引用您所在容器的父级。
...
<div class="row">
<asp:Repeater runat="server" ID="rptCourses" OnItemDataBound="rptCourses_ItemDataBound" OnItemCommand="rptCourses_ItemCommand">
<HeaderTemplate>
<table class='<%# ((RepeaterItem)Container.Parent).Abbrev %>' style="display: none; margin-top: 10px; font-size: 26px; width: 90%;">
</HeaderTemplate>
...
一旦 class 开始工作，它应该如下所示：
$(function() {
//$('.courses').hide();
$('.br-plus').on('click', function() {
debugger
var cat = $(this).data("cat")
//var catID = $('#hfCategoryID').val();
$('.' + cat).toggle();
$(this).hide();
$(this).siblings().show();
});
$('.br-minus').on('click', function() {
debugger
//var catID = $('#hfCategoryID').val();
var cat = $(this).data("cat")
$('.' + cat).toggle();
$(this).hide();
$(this).siblings().show();
});
$('#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 class="br-plus" class="fa fa-plus-circle" style="color: #3697EA; margin-left: 1%; margin-top: 60px;" data-cat="DelOps">+</i>
<i class="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='DelOps' style="display: none; margin-top: 10px; font-size: 26px; width: 90%;">
<tr style="border-top: 1px solid #000;">
<td style="padding-top: 30px;">
td 1.1.1
</td>
<td style="text-align: center;">
td 1.1.2
</td>
</tr>
<tr style="border-top: 1px solid #000;">
<td style="padding-top: 30px;">
td 1.2.1
</td>
<td style="text-align: center;">
td 1.2.2
</td>
</tr>
</table>
</div>
<div style="font-size: 120%">
Network Operations
<i class="br-plus" class="fa fa-plus-circle" style="color: #3697EA; margin-left: 1%; margin-top: 60px;" data-cat="NetOps">+</i>
<i class="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='NetOps' style="display: none; margin-top: 10px; font-size: 26px; width: 90%;">
<tr style="border-top: 1px solid #000;">
<td style="padding-top: 30px;">
td 2.1.1
</td>
<td style="text-align: center;">
td 2.1.2
</td>
</tr>
<tr style="border-top: 1px solid #000;">
<td style="padding-top: 30px;">
td 2.2.1
</td>
<td style="text-align: center;">
td 2.2.2
</td>
</tr>
</table>
</div>
</body>