Как реализовать начальный глификон на несколько строк в таблице, используя Jquery в MVC?

Question

Я хочу реализовать bootstrap glyphicon для нескольких строк в таблице, используя JQuery.

я хочу, чтобы при нажатии на 1-ю строку изменялась 1-я glyphicon, если нажималась 2-я, то на 2-йизменить и 1-й должен идти в нормальном положении и т. д.

Родительский вид

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

  });

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

 });