时间戳

首页 > 解决方案 > 如何在 MVC 中使用 Jquery 在表中的多行上实现引导 glyphicon？

jquery - 如何在 MVC 中使用 Jquery 在表中的多行上实现引导 glyphicon？

问题描述

我想 bootstrap glyphicon使用 JQuery 在表中的多行上实现。

我想要的是，如果点击第一行，那么第一行glyphicon应该改变，如果点击第二行，那么第二行应该改变，第一行应该进入正常位置，依此类推。

父视图

 <div id="Partial">     
    Html.RenderPartial("_Partial", Model);           
 </div>

局部视图

<table class="table">
      @foreach (var item in Model)
      {
        <tr class="accordion-toggle" data-toggle="collapse" data-target="#ABC_@(item.Id)">
            <td>
                <button class="lCls" type="button">
                     <span class="glyphicon glyphicon-chevron-right"> @Html.Raw(item.H)</span>
                 </button>
            </td>
            <td>
                @Html.Raw(item.E)
            </td>
        </tr>

        <tr>
           <td class="hiddenRow">
                <div class="accordian-body collapse" id="ABC_@(item.Id)">
                     <table>
                            <tr>
                                <td>
                                     @Html.Raw(item.D)
                                </td>

                                <td>
                                     @Html.Raw(item.B)
                                </td>
                            </tr>
                     </table>
                 </div> 
            </td>
        </tr>                     
      }
</table>

jQuery

 $('#Partial').on('click', '.lCls',function () {
    $(this).children('span').toggleClass("glyphicon-chevron-right glyphicon-chevron-down");          

  });

标签： jqueryasp.net-mvc

解决方案

您的代码似乎正确，您只是缺少有关恢复到默认位置的部分。

 $('#Partial').on('click', '.lCls',function () {
      $('#Partial').find(".glyphicon-chevron-down").toggleClass("glyphicon-chevron-right glyphicon-chevron-down");
      if (!$(this).children('span.glyphicon-chevron-down').length)
           $(this).children('span').toggleClass("glyphicon-chevron-right glyphicon-chevron-down");          

 });

推荐阅读