展开/折叠嵌套中继器

时间：2018-10-02 16:23:53

标签： jquery asp.net .net-4.5 repeater collapsable

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

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

这就是我所拥有的以及我所尝试的（减去无关的东西）：

<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中基于扩展和折叠点击了加号或减号。

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

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

1 个答案:

答案 0 :(得分：0)

您仍然需要将$(this).siblings().hide();更改为$(this).siblings().show();。这样您就可以摆脱$('#br-plus').show(); $('#br-minus').show();

此外，由于您有多个br-plus / br-minus元素，因此无法使用id在它们上进行选择，而是希望将其用作类： 

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

编辑：我在以下位置找到了空白类的解决方案 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>

...

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

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

相关问题
最新问题