手风琴向上箭头

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

解决的小提琴。 最简单的方法是使用类和伪元素。 您可能会想使用真棒字体或箭头图像，但是例如我只使用了v和>。 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');

    });
});

只是意识到我按照您的要求向后箭头。 我习惯于看到>闭合，而V闭合。 不过，这是一个非常容易的切换。

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