展开/折叠嵌套中继器 [英] Expand/Collapse Nested Repeater

查看：122
本文介绍了展开/折叠嵌套中继器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试实现一个嵌套中继器，其中外部中继器显示类别(最初折叠)，并且当用户单击+或-内部中继器展开/折叠时.

I am trying to implement a nested repeater with outer repeater showing categories (initially collapsed) and when user clicks + or - inner repeater expands/collapses.

我有中继器，但是当我单击+时，两个内部中继器都展开了.我试图动态设置类名，以便只扩展一个类名，但是现在我发现它已损坏.

I have the repeaters but when I clicked on + both inner repeaters expanded. I tried to set the class name dynamically so only one would expand but now it sees I broke it.

这就是我所尝试的(减去无关的东西):

This is what I have and what I have tried (minus irrelevant stuff):

<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>

我尝试将数据属性添加到+和-图标(数据猫)，在内部中继器中将表的类别值使用相同(将其类设置为类别名称)，并在jQuery中基于扩展和折叠点击了加号或减号.

I tried adding a data attribute to + and - icons (data-cat), use the same value of category for the table in inner repeater (set its class to be the category name), and in jQuery expand and collapse based on which plus/minus was clicked.

当我查看源代码时，图标具有正确的数据属性(正确的类别缩写)，但表的类名称为空白.

When I view source, icons have correct data attribute (correct category abbreviation) but table's class name is blank.

$(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();

You still need to change $(this).siblings().hide(); to $(this).siblings().show();. This lets you get rid of $('#br-plus').show(); $('#br-minus').show();

此外，由于您有多个br-plus/br-minus元素，因此不能使用id对其进行选择，而是希望将其用作类:

Also, since you have multiple br-plus/br-minus elements, you can't use an id to select on them, you'll want to use it as a class instead:

$('.br-minus').on('click', function() {
    debugger
    //var catID = $('#hfCategoryID').val();
    var cat = $(this).data("cat")
    $('.' + cat).toggle();
    $(this).hide();
    $(this).siblings().show();
  });

编辑:我在以下位置找到了针对空白类的解决方案: 在HeaderTemplate的嵌套中继器中访问父数据 .为了从内部中继器获取Abbrev，您需要引用您所在容器的父级.

I found a solution for the blank class at Accessing parent data in nested repeater, in the HeaderTemplate. In order to get the Abbrev from the inner repeater, you need to reference the parent of the container you're in.

...

<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>

...

一旦类开始工作，它应该看起来像这样:

Once you get the class working, it should look like this:

$(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>

这篇关于展开/折叠嵌套中继器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆