Question

我试图在部分关闭时添加向下箭头，在部分打开时添加上箭头 - 在手风琴中每个标签的头部右端。

以下是我使用过的HTML。它有for-each循环。

-- Javascript


$(function () {


        $('tr.accordion').click(function () {

            $(this).nextUntil('.accordion').slideToggle(20);

                      
        });
    });

td.bg-light-blue{ background-color:rgb(233,242,253) }
.text-mid{ font-size:14px }

<div class="box-table" id="div_SummaryReport">
  <table class="research table text-center" id="tblSummary" width="100%">
    <thead style="position:relative;">
      <tr style="position:relative;">
        <th align="center" width="20%" style="position:relative;">&nbsp;</th>
        <th align="center" width="20%" style="position:relative;" data-toggle="tooltip" data-placement="top" title="Total Calls"> Total Calls</th>
        <th align="center" width="20%" style="position:relative;" data-toggle="tooltip" data-placement="top" title="Contacted"> Contacted</th>
        <th align="center" width="20%" style="position:relative;" data-toggle="tooltip" data-placement="top" title="#of saved calls"> Saved</th>
        <th align="center" width="20%" style="position:relative;" data-toggle="tooltip" data-placement="top" title="Percent"> Percent %</th>
      </tr>
    </thead>

    <tbody>
      @foreach (var item in Model.GroupingData) {
      <tr class="accordion">
        <td class="bg-light-blue text-mid" colspan="5"><span class="text-blue">@item.Key</span></td>

        <td class="bg-light-blue">downarrow</td>
      </tr>


      foreach (var data in item.Value) {
      <tr class="hidden-row">
        <td>@data.Name</td>
        <td>@data.TotalCalls</td>
        <td>@data.Contacted</td>
        <td>@data.Saved</td>
        <td>@data.Percentage</td>
      </tr>
      } }
    </tbody>

  </table>
</div>

实际页面看起来很接近这个小提琴： https://jsfiddle.net/jmmanne/35nne25r/这是没有循环的示例html

Answer 1

小提琴中的解决方案。最简单的方法是使用类和伪元素。你可能想要使用font-awesome或箭头的图像，但我只是使用v和＆gt;例如。 https://jsfiddle.net/VeritoAnimus/avw0d9j1/1/

CSS更新

tr.accordion td:last-child:after { float: right; }
tr.accordion td:last-child:after{ content: 'v';  }
tr.accordion.collapsed td:last-child:after{ content: '>'  }

JS更新

$(function () {
    $('tr.accordion').click(function () {
                    var acdn = $(this);
        $(this).nextUntil('.accordion').slideToggle({
            duration: 20,
          complete: function () {

                /* if we were just doing one element, we could do a simpler complete function this will only change when the animation completes.  since there's  multiple rows, this would be called multiple times, so that's a pain. hence why I check the row for which way I was going. */

              if($(this).is(':hidden') && !acdn.hasClass('collapsed'))
                acdn.addClass('collapsed');
              else if (!$(this).is(':hidden') && acdn.hasClass('collapsed'))
                acdn.removeClass('collapsed');

          }

        });
        // if you don't care about when it changes, you could just do this instead.
        // $(this).toggleClass('collapsed');

    });
});

刚才意识到我根据你的要求向后退箭了。我以前常常看到＆gt;关闭，V打开。这是一个很容易的转换。

tr.accordion td:last-child:after{ content: '>';  }
tr.accordion.collapsed td:last-child:after{ content: 'v'  }

手风琴向上箭头

1 个答案: