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

Question

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

我想要的是，如果单击第一行，则第一个 glyphicon 应更改，如果单击第二行，则第二个应更改，第一个应处于正常位置，依此类推。

父 View

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

部分 View

<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");          

  });

Answer 1

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

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

 });